浏览器IMG图片原生懒加载loading=”lazy”

兼容

使用方法

如果你想要让一张图片在靠近浏览器视窗的时候才加载，下面代码就可以了：

<img src="./example.jpg" loading="lazy" alt="demo">

无需任何其他的JavaScript代码就可以实现懒加载功能。

如何判断浏览器是否支持

下面三种方法都可以：

var isSupportLoading = 'loading' in document.createElement('img');

或者：

var isSupportLoading = 'loading' in new Image();

或者：

var isSupportLoading = 'loading' in HTMLImageElement.prototype;

参考来源

张鑫旭-浏览器IMG图片原生懒加载loading=”lazy”实践指南