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

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

苏南大叔:如何使用浏览器自带的懒加载功能?解析img的loading属性 - 浏览器自带的懒加载功能
如何使用浏览器自带的懒加载功能?解析img的loading属性(图3-1)

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

历史方案

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

参考文档:

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

浏览器自带方案

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

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

苏南大叔:如何使用浏览器自带的懒加载功能?解析img的loading属性 - caniuse-loading
如何使用浏览器自带的懒加载功能?解析img的loading属性(图3-2)

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

判断是否支持懒加载

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

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

懒加载对比

懒加载:

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

立即加载:

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

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

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

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

测试结果

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

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

苏南大叔:如何使用浏览器自带的懒加载功能?解析img的loading属性 - 运行截图
如何使用浏览器自带的懒加载功能?解析img的loading属性(图3-3)

结束语

更多html5的实际代码效果,请参考:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   html