简单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>

感谢您的来访，获取更多精彩文章请收藏本站。