图片的懒加载一直都是网页性能优化的重要一环,减少不必要的图片请求,可以有效提升网页加载速度,现在,Chrome浏览器增加了这项功能的原生支持。

使用方式很直观,就是在img标签上增加了loading="lazy"属性,浏览器会自动判断是否需要懒加载图片。

在线示例:

See the Pen by (@justforuse) on CodePen.

打开控制台会发现,随着网页滚动,位于较下方的图片才开始加载。

除了支持图片的懒加载,在iframe上应用也可以懒加载内嵌网页。

参考链接:https://web.dev/native-lazy-loading

由于属性比较新,目前兼容性较差,需要做兼容处理

Can I Use loading-lazy-attr? Data on support for the loading-lazy-attr feature across the major browsers from caniuse.com.

觉得作者写得不错?不妨轻击下方按钮~

赏点银子给楼主凑凑买咖啡喝吧
微信
支付宝
扫码打赏,建议金额1-10元

Copied From 畅言