当图像进入视口时延迟加载图像答案

【问题标题】：Lazy load images when they come into the viewport当图像进入视口时延迟加载图像
【发布时间】：2011-02-16 14:02:20
【问题描述】：

我最近遇到了一些博客/网站，它们仅在将图像滚动到可见视口时才加载图像。然后淡入淡出。是否有 jQuery ......甚至 Wordpress 插件可以做到这一点？

例如http://icodeblog.com

【问题讨论】：

对用户来说似乎真的很烦人......
双重欺骗！我一个人在 SO 上已经两次回答了这个问题。
欺骗 1 stackoverflow.com/questions/1464968/…
欺骗 2 stackoverflow.com/questions/2171889/…
现在找不到其余的，但如果我没记错的话，LazyLoad 是所有这些问题中的最佳候选者。

标签： jquery image lazy-loading

【解决方案1】：

JavaScript 的优点之一是您可以查看源代码并查看正在发生的事情。查看源代码后，我发现：

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

【讨论】：

【解决方案2】：

你可以试试我写的这个 jQuery 插件，它使用 html cmets 来延迟加载任意的 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】：

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

【讨论】：

页面不存在了。