谷歌浏览器开始测试原生图片视图延迟加载属性
谷歌浏览器开发工程师发布的博客显示,谷歌浏览器已开始在金丝雀版中测试原生的图片视图延迟加载属性。延迟加载即用户打开网页时只有出现在屏幕中的图片会被加载,其余图片将在页面滚动到对应位置后再加载。延迟加载给用户带来的直观感受就是网页加载的速度明显提升,因为不需要一次性将页面所有资源全部加载。对于网站和开发者来说延迟加载也有助于降低服务器带宽开支,避免加载不会展示的图片浪费带宽流量资源。当然延迟加载有时候可能也会造成困扰,如用户快速滚动页面时需要加载被延迟的图片、进而消耗部分时间。
原生支持的延迟加载属性:
当前其实已经有不少开发者使用JavaScript脚本进行延迟加载, 不过谷歌浏览器开始原生支持延迟加载技术。开发者只需要在图片属性里标记延迟加载即可,浏览器在读取资源时会按照屏幕滚动和展示的情况进行加载。延迟加载属性支持图片以及在 iframe 嵌套框架中的视频, 具体可以参考谷歌浏览器工程师提供的示例代码。
示例代码:
<!-- Lazy-load an offscreen image when the user scrpls 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 wpf" loading="lazy">
<!-- Lazy-load an offscreen iframe when the user scrpls near it -->
<iframe src="video-player.html" loading="lazy"></iframe>
其中延迟加载还支持以下几种属性:
1. 当loading属性为lazy时表示此资源适合进行延迟加载, 浏览器读取后会按照用户操作行为进行延迟加载。
2. 当loading属性为eager时表示此资源不适合进行延迟加载, 开发者可以利用此属性强制浏览器立即加载。
3. 当loading属性为auto时表示此资源既可以延迟加载也可以立即加载,具体由浏览器自行判断怎么去加载。
相关阅读:
微软公开Chromium版Edge浏览器测试版下载
最新教程 更多
- Win10系统KB4055254 / KB4051033 / KB4051963补丁下载
- 激活工具HEU KMS Activator v19.0.0版更新下载
- DiskGenius专业版和普通版有什么区别 标准版和专业版区别大吗
- 4K播放器哪个好 畅享超清观影体验
- DiskGenius和HDTune Pro哪个准 检测坏道哪个好
热门教程 更多
- Win10系统哪个版本最好用?最强大?
- 玩游戏用Win10哪个版本|Win10专业版成首选
- 微软Win10 1809正式版17763更新内容及下载
- Msdn原版Win10 1903专业版 iso镜像下载
- Win10 1709秋季大更新有哪些新功能