在网站中加载图片是常见的需求，但是在加载大量图片时，会导致网页性能下降，影响用户体验。原生的 lazy-loading 可以帮助我们解决这个问题。
什么是 lazy-loading？
lazy-loading 指的是在页面中只有当需要显示图片时才进行加载，而不是一开始就加载所有图片。这样可以减少资源的消耗，提高页面性能和加载速度。
如何使用原生 lazy-loading？
原生 lazy-loading 是通过设置 <img> 标签的 loading 属性来实现的。此属性接受以下三个值：
auto：浏览器自动决定何时加载图片eager：立即加载图片lazy：在需要时才加载图片
<!-- eager loading --> <img src="example-image.jpg" alt="Example" loading="eager"> <!-- lazy loading --> <img src="example-image.jpg" alt="Example" loading="lazy">
兼容性
目前，该特性已被 Chrome、Firefox 和 Edge 支持。如果要在旧版浏览器上使用 lazy-loading，可以借助第三方库或写一些兼容性代码。
注意事项
loading属性必须设置在<img>标签上，不能设置在父级元素上。- 如果同时使用
loading="lazy"和IntersectionObserver来监听可见性，只有在浏览器支持loading属性时才会生效，否则需要手动加载图片。 - 如果使用了懒加载，为了避免占位符导致页面跳动，建议设置图片的宽高或使用 CSS 预加载。
示例代码
<img src="example-image.jpg" loading="lazy" alt="Example">
结论
原生 lazy-loading 是一种简单有效的图片懒加载方式，并且易于实现和维护。但是需要注意兼容性和一些细节问题，以确保其正确性和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61510