Question

我最近一直在浏览博客/网站，只会在滚动到可见视口时加载图片。它然后淡入它们。是否有一个jQuery ...甚至Wordpress插件可以做到这一点？

e.g。 http://icodeblog.com

Answer 1

JavaScript的一个好处是你可以查看源代码并查看最新情况。查看源代码后，我发现了这个：

http://www.appelsiini.net/projects/lazyload

Answer 2

LazyReady：http://plugins.jquery.com/project/LazyReady

Answer 3

你可以试试我写的jQuery插件，它使用html注释来延迟加载任意位的html，包括图像：

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

以下是一个例子：

<pre class=”i-am-lazy” ><!–
    <img src=”some.png” />
 –></pre>

<pre class=”i-am-lazy” ><!–
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

所以基本上你用一个占位符标签和内部html注释来包装你想要延迟加载的内容。当占位符在视口中变为可见时，它将替换为注释中的html字符串。

您可以为占位符使用任何标记，但我喜欢pre，因为当内部只有注释时它会呈现为0维。

希望这有帮助！ @MW_Collins

延迟加载图像进入视口时加载图像

3 个答案: