懒加载插件可以在用户滚动页面时加载图片吗？

Question

我非常喜欢懒加载插件，但很遗憾它在新浏览器上无法工作。

是否有任何方法可以编写自己的代码，在用户滚动之前不加载下方的图像？

<img _src="/fullscreen/img/You are everywhere 2.png" class='lazyLoad' />

jQuery('.lazyLoad').each(function(){
       var _elm= jQuery(this);
       _elm.attr('src',_elm.attr('_src'));

       //on DOM ready loop through each 
      //image with class=lazyLoad and add src attribute to it.
})

希望我能把这个问题解决，可惜appelsiini网站不再受支持。

我找到了一个在所有浏览器中都有效的网站http://haw-lin.com/，它使用了与http://www.appelsiini.net/projects/lazyload非常相似的插件脚本。但是没有MIT许可证，我发现很难理解。

你可以推荐哪个jQuery图像懒加载插件？

- Tara Irvine

---

它在哪些浏览器中无法工作？ - Pekka

在 Firefox、Chrome 和 Safari 中，appelslini.net 上的那个似乎对我来说运行良好。 - dstarh

Safari虽然是我的测试不起作用，但我被告知这是一个错误。现在我不太确定了。 - Tara Irvine

Answer 1

jQuery 图片延迟加载插件 的演示页面在我的 Mac 上的 FF3.6 上似乎无法工作。我通过 Firebug 的 Net 标签观察 HTTP 请求，发现所有图片都在 onload 时加载了。

你可以尝试使用名为 JAIL 的插件，它完美地运行（需要一些 HTML 更改）。我特别建议查看示例。

- sebarmeli

---

JAIL的链接挂了。:( - Wonko the Sane

Answer 2

如果你查看github上jquery_lazyload的forks，其中一些解决了问题，适用于更新版本的浏览器。

- Matt V.

Answer 3

你可以尝试我编写的这个jQuery插件，它使用HTML注释来延迟加载任意的HTML片段，包括图片：

jQuery懒加载器博客文章

jQuery懒加载器插件页面

这里是一个例子：

<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维度。

- Michael Collins

---

是的，您的解决方案有效，但不可接受，因为它不够不显眼。也就是说，如果浏览器禁用了JS，则您的解决方案将无法工作 - 不会显示任何图像。据我所知，在文档准备就绪后，没有办法阻止图像在新浏览器中加载。 - scibuff