如何使用浏览器自带的懒加载功能？解析img的loading属性

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

图片是网页的重要组成部分，为了用户体验，诞生了图片懒加载的概念。就是页面加载的时候，并不真正加载图片。而是去等到页面快滚动到图片所处的位置的时候，再去真正的请求对应的图片，这个概念就叫做懒加载。这么操作的好处是加快页面的加载速度，节约带宽和客户端请求数。那么，这个懒加载概念有没有什么不好的地方呢？

苏南大叔的“程序如此灵动”博客，记录苏南大叔和计算机代码的故事。测试环境：谷歌浏览器@108.0.5359.99。

历史方案[lazyload]

以前有个jquery.lazyload.js是用来实现这个需求的，然而这个插件带来的新问题是：SEO的问题。因为这个插件它要求先置空img标签的src属性，这样才能阻止默认的图片加载行为。

参考文档：

• http://www.appelsiini.net/projects/lazyload
• https://github.com/tuupola/lazyload

这个lazyload库，已经三年没有更新了。所以，更加强烈建议大家使用浏览器自带的懒加载功能。

浏览器自带方案[loading]

谷歌浏览器在75版开始，已经自带图片懒加载方案，这个方案就是img的loading属性。而且，这个方案里面，并没有置空src属性，所以也有很好的SEO表现。

根据caniuse网站显示，这个属性的浏览器支持情况如下：

• https://caniuse.com/?search=loading

最新版本的浏览器，支持度挺高。其它的老版本浏览器，即使不支持这个懒加载属性，也是默认的立即加载效果，并没有什么副作用存在。

判断是否支持[loading]懒加载

let hasSupport = 'loading' in HTMLImageElement.prototype;
console.log(hasSupport);

原理上就是判断img标签是否自带个loading属性。

[loading]懒加载对比

懒加载：

<img src="sunan1.png" loading="lazy"/>

立即加载：

<img src="sunan2.png" loading="eager"/>

浏览器的默认行为自主决定：

<img src="sunan3.png" loading="auto"/>

在实际测试中，因为这个方案效果是图片的懒加载。所以，要注意图片在文档流中的实际位置，是不是会触发懒加载的效果。

测试结果

实际上的测试结果，和想象中还是有一些差异。在谷歌浏览器里面的测试结果显示：

• 双击页面打开的时候，loading是不生效的，全部表现为即时加载。
• 放在容器里面打开的时候，auto表现为即时加载。

结束语

更多html5的实际代码效果，请参考：

• https://newsn.net/tag/html/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。