使用JavaScript如何延迟加载图像？

Question

我很好奇是如何延迟加载图像,滚动到它们时将加载的图像,工作.

任何提示？

Answer 1

这是一个使用插件的方法:http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/这里是jquery插件:http://www.appelsiini.net/projects/ lazyload

基本上你在你的src属性中放置一个虚拟图像并为实际图像添加另一个属性,JS检测页面的滚动位置,并在你足够接近图像时加载图像数据.它通过替换src实际图像的来源来做到这一点.

这是另一种解释:http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/

Answer 2

2020+ 解决方案：

有一种本地方式来延迟加载图像，这种方式已经在某些浏览器中有效。虽然标准化仍在进行中，但您今天已经可以使用它了！只需将loading属性添加到您的图像标签并将其设置为“懒惰”：

<img
    src="picture.jpg"
    width="100"
    height="100"
    alt="descriptive text"
    loading="lazy"
>

就是这样。只要当前视口足够近，兼容的浏览器就会延迟加载该图像。

此处提供更多信息：

• 用于 Web 的本机延迟加载
• 请求添加到 HTML 规范中
• 当前浏览器支持

如果您需要旧浏览器的解决方案，您应该查看MDN上的延迟加载。

Answer 3

以及如何轻松做到这一点的示例。

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg">

"lazy.jpg" 可用于所有图像，这将导致实际上只加载一个图像（并且它是一个 1x1px 的小重量图像）。所以，考虑一下我有一个要访问的 250 家商店的列表，每个商店都有一个公司徽标。看起来像这样：

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg">
<img src="/images/lazy.jpg" data-real-src="/images/company-2.jpg">
<img src="/images/lazy.jpg" data-real-src="/images/company-3.jpg">
...

然后是魔法！把它放在你的javascript文件中：

$('img[src="/images/lazy.jpg"]').each(function(index, el) {
    $(el).attr('src', $(el).data('real-src'));
});

和wacka-wacka，所有lazy.jpg 图像都将被它们的“真实”图像替换。目的是让您的 html 页面加载速度更快（因为这 250 家公司在 lazy.jpg 中都有相同的“徽标”：）……但是在 DOM 完成加载后，JS 会处理这一切。

这当然是一个 jQuery 解决方案。也可以用纯js来完成。