浏览器原生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