使用浏览器原生懒加载loading=lazy实现图片延迟加载

在网页中，常常需要用到图片，而图片需要消耗较多的流量来加载，这样就影响页面的打开速度。正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载的图片标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量。

所以通常会使用图片懒加载（image lazy loading） 技术。就是在用户浏览网页时，只有当页面快要滚动到图片所在位置时，才加载所需的图片，而不是在页面打开后就一个劲地把全部图片加载完整。

jQuery插件 lazyload.js

早前很多都是用Lazy Load 这个 jQuery 插件，它是一个用来缓冲加载图片的插件。式实现非常简单，但是需要对目标 HTML 文件进行改造，在 img 标签中添加新的属性，把 src 属性的值指向占位图片，添加 data-original 属性，让其指向真正的图像地址。

<img src="img/seat.png" data-original="img/real.gif" >

这样使用必然会有些麻烦。必须按照这种结构才有实际作用，需要对输出进行重新定义。影响RSS阅读文章，会出现无法加载图片的问题，因为大部分的RSS阅读器是不支持执行JS脚本的。而且这个对搜索引擎也不友好。

基于 loading=lazy 的方式

从chrome 76之后，支持原生懒加载特性，使用 loading="lazy" 语法。

<img src="picture.png" loading="lazy" width="200" height="200" />

通常来说，width 和 height 尽量要有。当浏览器加载图像时，它不会立即知道图像的尺寸，除非明确指定这些尺寸。为了让浏览器在页面上为图片预留足够的空间，建议所有的标签同时包含width和height属性。如果没有指定尺寸，可能会发生布局偏移，这在需要一些时间加载的页面上更为明显。

谷歌的web.dev上有详细的说明，可以查阅：https://web.dev/browser-level-image-lazy-loading/