通过Lazy loading来实现浏览器原生img懒加载方案

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

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

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

使用方法

# 延迟加载资源
<img src="./图片地址" loading="lazy" alt="页面关键词">

# 立即获取资源
<img src="./图片地址" loading="lazy" alt="页面关键词">

👋 感谢您的观看！