1

我们的网站有几个页面显示了许多图像。在缓慢的互联网页面加载很长时间才能与图像一起完全加载。我在谷歌搜索有 jquery 解决方案，当用户向下滚动页面时，它将按需下载图像。我发现了一个名为lazyload的jQuery库，网址是http://www.appelsiini.net/projects/lazyload

这个插件很好，但我的页面内容以及从数据库填充的图像。数据库内容是从 html 编辑器插入的。我阅读了延迟加载，发现

1)<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" >

image src 将有不同的图像，实际的图像路径将被写入 data-original 属性，这对于我的页面是不可能的，因为我说我的页面内容是由 html 编辑器开发的。所以我需要帮助来了解如何自定义库，因此我的图像标签将与普通图像标签一样<img class="lazy" src="img/example.jpg" >，但它仍然有效。如果这个库不可能，那么建议我任何其他只下载浏览器视口中的图像的库。我想说我的图像标签将是<img class="lazy" src="img/example.jpg" >，但库将只下载浏览器视口中的那些图像。请帮忙。或给我任何示例代码，当用户向下滚动时，将下载少量图像并下载其余图像。谢谢。

4

1 回答 1

3

打电话之前

$("img.lazy").lazyload();

为数据库内容的所有图像添加惰性类和数据原始属性。例如，您在 id 为“content”的 div 中有数据库内容。

$("#content img").each(function() {
    $(this).addClass('lazy');
    $(this).attr('data-original', $(this).attr('src'));
});

希望它会有所帮助。

于 2012-06-13T13:51:19.927 回答