谷歌浏览器自v75版最先将支持原生的图片视图延迟加载属性

谷歌浏览器自v75版最先将支持原生的图片视图延迟加载属性

微软最先为桌面版Outlook客户端提供集成化的共享菜单利便用户使用

谷歌浏览器开发工程师公布的博客显示,谷歌浏览器已最先在金丝雀版中测试原生的图片视图延迟加载属性。

延迟加载即用户打开网页时只有出现在屏幕中的图片会被加载,其余图片将在页面转动到对应位置后再加载。

延迟加载给用户带来的直观感受就是网页加载的速率显著提升,由于不需要一次性将页面所有资源所有加载。

对于网站和开发者来说延迟加载也有助于降低服务器带宽开支,制止加载不会展示的图片虚耗带宽流量资源。

固然延迟加载有时候可能也会造成困扰,如用户快速转动页面时需要加载被延迟的图片、进而消耗部门时间。

谷歌浏览器自v75版最先将支持原生的图片视图延迟加载属性

原生支持的延迟加载属性:

当前实在已经有不少开发者使用JavaScript剧本举行延迟加载, 不外谷歌浏览器最先原生支持延迟加载手艺。

火狐浏览器推出v66.0.4紧要修复版解决扩展程序被禁用的问题

开发者只需要在图片属性里符号延迟加载即可,浏览器在读取资源时会根据屏幕转动和展示的情形举行加载。

延迟加载属性支持图片以及在 iframe 嵌套框架中的视频, 详细可以参考谷歌浏览器工程师提供的示例代码。

谷歌浏览器自v75版最先将支持原生的图片视图延迟加载属性

示例代码:

<!-- 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>

其中延迟加载还支持以下几种属性:

1. 当loading属性为lazy时示意此资源适合举行延迟加载, 浏览器读取后会根据用户操作行为举行延迟加载。

2. 当loading属性为eager时示意此资源不适合举行延迟加载, 开发者可以行使此属性强制浏览器立刻加载。

3. 当loading属性为auto时示意此资源既可以延迟加载也可以立刻加载,详细由浏览器自行判断怎么去加载。

火狐浏览器每夜构建版已推出新的证书查看页以及可以关闭画中画图标

分享到 :
相关推荐

发表评论

登录... 后才能评论