在HTML中实现图片的懒加载

在当今的数字化环境中，图片在吸引用户注意力和传达信息方面起着至关重要的作用。然而，它们对网页的加载时间的影响可能很大，导致用户体验不佳和搜索引擎排名下降。这使得图片优化成为任何网站性能优化策略的关键部分。

最常用的优化图片的技术是懒加载。通常，这是通过延迟加载初始视口外的图片，直到它们接近滚动到视图中来实现的。通过推迟加载图片直到它们即将需要的时候，懒加载优化了页面性能，并确保了流畅的浏览体验。

幸运的是，HTML标准已经包含了一个内置的解决方案，可以轻松实现懒加载，即loading属性。只需将loading="lazy"添加到所需的图片上，您就可以发挥懒加载的威力，让浏览器优化资源分配和加载优先级。

<img src="/img/duck.png" alt="一只橡皮鸭" loading="lazy" />

[!NOTE]

在撰写本文时，loading属性在大多数现代浏览器中都得到支持，但在Safari等旧版浏览器中不支持。值得注意的是，懒加载可以被视为对支持它的浏览器的渐进增强，因此对于任何可以从中受益的用户来说，仍然值得添加。