根据谷歌浏览器开发工程师发布的博客，谷歌浏览器已经开始在金丝雀版中测试原生图像视图的延迟加载属性。延迟加载意味着当用户打开网页时，只有出现在屏幕上的图片才会被加载，其余图片将在页面滚动到相应位置后加载。
延迟加载给用户带来的直观感受是网页加载速度明显提高，因为不必一次性加载页面的所有资源。对于网站和开发者来说，延迟加载也有助于减少服务器的带宽支出，避免加载不会显示的图片而浪费带宽流量资源。
当然，延迟加载有时可能会导致问题，例如用户在快速滚动页面时需要加载延迟的图片，这将消耗一些时间。
本机支持的延迟加载属性：
目前，事实上许多开发人员已经使用JavaScript脚本进行延迟加载，但谷歌浏览器已经开始原生支持延迟加载技术。开发人员只需要在图像属性中标记延迟加载。
在读取资源时，浏览器会根据屏幕的滚动和显示来加载资源。延迟加载属性支持iframe嵌套框架中的图片和视频。有关详细信息，请参考谷歌浏览器工程师提供的示例代码。
示例代码：
!-- Lazy-load an offscreen image when the user scrpls 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 wpf" loading='lazy'
!-- Lazy-load an offscreen iframe when the user scrpls near it --
iframe src='video-player.html' loading='lazy'/iframe
其中，延迟加载还支持以下属性：
1.当加载属性为lazy时，表示该资源适合延迟加载，浏览器读取后会根据用户的操作行为延迟加载。
2.当loading属性为eager时，意味着该资源不适合延迟加载，开发人员可以使用该属性强制浏览器立即加载。
3.当loading属性为auto时，意味着该资源可以延迟或立即加载，如何加载由浏览器决定。
相关阅读：
微软Open Chromium Edge浏览器测试版下载
