jQuery lazyload插件

Question

我有一个包含大约100张图片的列表的页面，如果用户只查看大约，我不希望浏览器必须加载所有图片。其中10个。

所以我在我的页面上尝试过jQuery.lazyload插件。

如果我写：

$( function() {
    $('.list li img').lazyload( { placeholder: 'n.gif' } );
});

代码：

<ul class="list">
    <li><img src="myawesomeimage.jpg"></li>
</ul>

浏览器在将lazyload应用于图像之前加载图像。 我在图像标签下面尝试了lazyload而没有文档就绪的结构 - 相同的结果

我通过记录对图像的访问权限的PHP脚本代理图像加载 - 它仍然在开始时加载所有内容......

有人有想法吗？

Answer 1

您是在本地还是通过互联网连接进行测试。我唯一能想到的是，如果您在本地或本地网络上进行开发，图像的加载速度会非常快，以至于插件在加载之后才会执行。调试此方法的一种方法可能是使用Firebug网络选项卡。在执行延迟加载之前，将$ .ajax调用添加到无处不重的位置，然后检查网络选项卡以查看AJAX请求何时与加载图像时相比。如果一切顺利，您将在图像请求之前看到的AJAX请求。如果您没有看到任何图像请求，请确保您正在查看“全部”组。

此外，请确保在测试所有这些内容时禁用缓存，否则浏览器将立即从缓存中加载图像。

最后，我注意到插件创建者提到它在与jQuery 1.3配对时在IE中不起作用。您正在测试哪种浏览器？

Answer 2

我发现不同的浏览器有不同的行为。有些浏览器会预先加载所有图像，即使使用了lazyload。

如果您可以控制HTML生成，那么就有一个绝对的解决方案。

像这样输出你的图像标签：

<img src=placeholder.png original=myimage.png>

换句话说 - 使src属性指向某个占位符图像（或完全省略它），并将原始属性指向您想要延迟加载的图像。

这将导致浏览器预加载占位符图像（最好只为所有img标记使用1个占位符），然后等待加载原始属性指向的图像。根据我的经验，这适用于所有浏览器。

Answer 3

查看一个名为JAIL http://www.sebastianoarmelibattana.com/projects/jail的插件可能是值得的，它在同一场景中运行良好，并且有利于在所有浏览器中工作并使用data- *属性。 H 您可以在http://blog.sebarmeli.com/2011/01/04/reasons-why-i-wrote-the-plugin-jquery-asynchronous-image-loader-jail/了解更多相关信息，然后在Github

上找到源代码