简单HTML5原生图片懒加载属性无需JS

在现代Web开发中，HTML5提供了一个原生的懒加载特性，即通过在img标签中添加lazy属性。这个方法非常简单直接，不需要额外的JavaScript代码来实现图片的懒加载。

下面是如何使用这个特性的示例：

只需要给图片添加 loading=”lazy” 就可以实现懒加载。

<img src="" loading="lazy" >

这里可以添加一段JavaScript代码，用于在图片加载前显示占位图

<img src="" loading="lazy" data-src="path/to/image1.jpg" >
<script>
document.addEventListener('DOMContentLoaded', function() {
'loading' in HTMLImageElement.prototype ||
document.querySelectorAll('img[data-src]').forEach(img => {
img.src = img.dataset.src;
});
});
</script>