喜大普奔!Chrome 75 将原生支持图片懒加载
2021-01-09 22:46
197 查看
原创整理:前端大全(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 的懒加载特性。
-
在 Chrome 地址栏中输入:chrome://flags/
- 查找 Enable lazy image loading,把下图中两项设置成「Enable」
相关文章推荐
- 新版 chrome 将原生支持图片懒加载!
- 使用JQ加载图片,实现上传前先浏览.支持IE8+,火狐,Chrome,不支持Safari
- 原生javascript实现图片滚动、延时加载功能
- 上传图片预览 支持IE8+,FF,Chrome ,保留原图片比例
- 原生JS实现图片懒加载
- android 5.0之后原生webview同时用https和http加载HTML不加载图片解决方案
- masterslider支持动态加载数据,懒加载图片
- 原生JS实现最简单的图片懒加载
- 为什么有时IE不能加载背景图片而Firefox或Chrome都可以成功加载?
- 上传图片并显示,支持 IE Firefox Chrome
- Android广告图片轮播控件,支持无限循环和5种主题,可以灵活设置轮播样式、时间、位置、图片加载框架等!
- 原生js可视加载图片、延迟加载、懒加载
- 原生js开发图片瀑布流布局的懒加载效果
- PNaCl:Google通过LLVM增强对Chrome中原生应用的支持
- 插入透明32位png格式图片支持ie5.5+、 FF、chrome、safari
- TextView加载html代码显示图片,并且支持图片放大功能
- Android广告图片轮播控件,支持无限循环和5种主题,可以灵活设置轮播样式、时间、位置、图片加载框架等!
- 原生代码加载网络图片和Volley和Picasso的简单介绍和优缺点对比
- 原生JS实现图片懒加载
- 原生javaScript实现图片延时加载的方法