[HTML5] Native lazy-loading for the web
2023-09-14 09:00:48 时间
According to HTTPArchive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At the 90th percentile, sites send about 4.7 MB of images on desktop and mobile.
Currently, there are two ways to defer the loading of off-screen images and iframes:
- Using the Intersection Observer API [See example]
- Using
scroll
,resize
, ororientationchange
event handlers
In Chrome 76, you can use the loading
attribute to completely defer the loading of offscreen images and iframes that can be reached by scrolling:
<img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy"></iframe>
auto
: Default lazy-loading behavior of the browser, which is the same as not including the attribute.lazy
: Defer loading of the resource until it reaches a calculated distance from the viewport.eager
: Load the resource immediately, regardless of where it's located on the page.
The feature will continue to be updated until it's launched in a stable release (Chrome 76 at the earliest). But you can try it out by enabling the following flags in Chrome:
chrome://flags/#enable-lazy-image-loading
Notice: In order to make sure the good user experience, recommend to add the size info for the image:
<img src="..." loading="lazy" width="200" height="200"> <img src="..." loading="lazy" style="height:200px; width:200px;">
相关文章
- java和html_如何区别html和html5
- 用HTML5的FileReader生成Data Url详解编程语言
- HTML5 DRM正式成为Web标准,EFF辞职抗议详解编程语言
- html5对密码加密详解编程语言
- Java Web的web.xml文件作用及基本配置详解编程语言
- 应用Linux服务器:打开Web应用的大门(linux服务器web)
- Linux安装Web环境:一步一步指导(linux安装web环境)
- 利用Web服务管理Redis(web服务redis)
- HTML5 教程
- HTML5 Video
- HTML5 WebSocket
- 服务快速部署Linux服务器,轻松架设Web服务(linux部署web)
- HTML5 history新特性pushState、replaceState
- HTML5 教程
- HTML5 <keygen> 标签
- Web 编辑MSSQL:从零开始妙用数据库(web 编辑mssql)
- Linux下建立Web服务器的步骤(linux下的web配置)
- 轻松使用群晖在Web上快速安装Redis(群晖web安装redis)
- HTML5与Oracle结合,展现出更多可能(html5 oracle)
- Web构建Redis连接简单而有效的实现方式(web 连接redis)
- jquery操作HTML5的data-*的用法实例分享