钧言极客钧言极客

钧言极客

浏览器原生img懒加载方案 - Lazy loading

Lazy loading,在浏览器滚动像素识别,在首屏的图片先完成加载,其他屏幕外的图片通过将资源标识为非首先加载,从而在需要加载的时候再加载,从而提升网页浏览体验。

假如不使用懒加载的情况下,浏览器会默认加载网页所有的图片,这样对服务器性能和带宽带来不小的挑战,用户体验也不好。降低负载的方法是将用户浏览器的图片先完成加载,如果用户滚动页面,再加载需要的图片。

以前我们是使用lazyload.min.js方案实现这个功能,在Chrome和FireFox的更新中,加入对延迟加载的功能,只需要修改loading属性就可以了。

参数简介
auto浏览器自主决定加载方式
lazy用于延迟获取资源
eager用于立即获取资源

使用方法

# 延迟加载资源
<img src="./xxx.jpg" loading="lazy" alt="xxx">

# 立即获取资源
<img src="./xxx.jpg" loading="lazy" alt="xxx">

浏览器支持情况:Lazy loading via attribute for images & iframes

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《浏览器原生img懒加载方案 - Lazy loading》
文章链接:https://jinjun.top/454.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论