使用jquery延迟加载图像

Question

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

这个插件很好，但我的页面内容以及从数据库填充的图像。从html编辑器插入数据库内容。我读了 lazyload 并找到了

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

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

Answer 1

致电

之前

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

将lazy class和data-original属性添加到数据库内容的所有图像中。例如您在id为“content”的div中有数据库内容。

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

希望它会有所帮助。