喜大普奔!Chrome 75 将原生支持图片懒加载

Posted 前端大全

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了喜大普奔!Chrome 75 将原生支持图片懒加载相关的知识,希望对你有一定的参考价值。

(给前端大全加星标,提升前端技能


原创整理:前端大全(ID:FrontDev)


4 月 6 日,Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文,介绍到 <img> 和 <iframe> 的 loading 将新增一个属性:lazy


使用方法如下:

<img src="celebration.jpg" loading="lazy" alt="..." /><iframe src="video-player.html" loading="lazy"></iframe>

(代码块可左右滑动)

范例如下:

<!-- Lazy-load an offscreen image when the user scrolls near it --><img src="unicorn.jpg" loading="lazy" alt=".."/>
<!-- Load an image right away instead of lazy-loading --><img src="unicorn.jpg" loading="eager" alt=".."/>
<!-- Browser decides whether or not to lazy-load the image --><img src="unicorn.jpg" loading="auto" alt=".."/>
<!-- Lazy-load images in <picture>. <img> is the one driving image loading so <picture> and srcset fall off of that --><picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" loading="lazy"></picture>
<!-- Lazy-load an image that has srcset specified --><img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf" loading="lazy">
<!-- Lazy-load an offscreen iframe when the user scrolls near it --><iframe src="video-player.html" loading="lazy"></iframe>


如果不出意外,Chrome 75 将正式默认支持图片懒加载。


目前 Chrome 版本是 73,默认不支持懒加载。如果你等不急,可以直接强制开启 Chrome 的懒加载特性。


  • 查找 Enable lazy image loading,把下图中两项设置成「Enable」


推荐阅读

(点击标题可跳转阅读)




觉得本文对你有帮助?请分享给更多人

关注「前端大全」加星标,提升前端技能

喜欢就点一下「在看」呗~

以上是关于喜大普奔!Chrome 75 将原生支持图片懒加载的主要内容,如果未能解决你的问题,请参考以下文章

喜大普奔JFrog支持 P2P下载功能

喜大普奔JFrog支持 P2P下载功能

喜大普奔,angular终于有移动版UI库啦

喜大普奔,微软开源

喜大普奔!F5以6.7亿美元收购Nginx

200+语言任意互译,新开源的大模型让粤语靓仔直接喜大普奔