图片懒加载是前端网站优化的一种常见方式。使用懒加载可以提高页面加载速度，减少带宽占用，并提升用户体验。目前有很多懒加载库可供选择，但是使用 Chrome 原生的 lazyload 属性可以更加方便地实现懒加载效果。
什么是 lazyload 属性？
lazyload 是 HTML 元素的一个属性，在 Chrome 浏览器中可以实现图片懒加载。当一个页面中存在大量图片时，如果不做处理，这些图片会一次性全部加载，导致页面加载速度变慢并且占用带宽资源。而 lazyload 属性可以让图片按需加载，只有当图片出现在可视区域内时才会被浏览器加载。
lazyload 属性最初由 Google 开发，并于 Chrome 76 版本正式发布。目前，Firefox、Opera 和 Edge 等浏览器也已支持 lazyload 属性。可以说，使用 lazyload 属性是一种跨浏览器的图片懒加载解决方案。
如何使用 lazyload 属性？
使用 lazyload 属性非常简单，只需要为需要进行懒加载的图片添加 loading="lazy" 属性即可。例如：
<img src="image.jpg" loading="lazy">
这样，当图片进入可视区域时，浏览器会自动加载图片。需要注意的是，使用 lazyload 属性时应尽量避免给图片设置宽高属性，这样才能保证图片在加载前不占据过多的空间。
示例代码
下面是一个简单的示例代码，实现图片的懒加载效果：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ---- ---------------
-------
--- -
------ -----
------- -----
-------- ------
-
--------
-------
------
-------- ---- ------------
---- --------------------- --------------------- ---------------
---- --------------------- --------------------- ---------------
---- ---- ------ ---- ---
--------
----- ------ - -------------------------------------------------
------------------ -- -
---------------------------- -- -- -
----------------------- ---------
---
------- - ----------------
---
---------
-------
-------在上面的示例中，我们为需要进行懒加载的图片添加了 loading="lazy" 属性，并将真实的图片路径存储在 data-src 属性中。当图片进入可视区域时，浏览器会自动加载图片。在 JavaScript 中，我们通过监听图片的 load 事件，来确认图片是否成功加载。如果加载成功，我们就可以执行其他的操作，比如输出一条日志信息。
总结
使用 Chrome 原生的 lazyload 属性可以方便地实现图片懒加载效果，并提高页面的加载速度和用户体验。在使用 lazyload 属性时，需要为需要进行懒加载的图片添加 loading="lazy" 属性，并将真实的图片路径存储在 data-src 属性中。同时，还需要注意避免给图片设置宽高属性，以确保图片在加载前不占据过多的空间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45479