浏览器级图片延迟加载，告别JS懒加载

当页面中有大量图片的时候，都会采用懒加载技术实现图片的加载。

不管使用什么插件，都有可能让搜索引擎无法抓取图片，特别对于图片为主的站点来说，搜索引擎这点很重要。

如果现在告诉你，你可以不用三方的插件，只需要加一个小小的属性，就可以实现浏览器级别的懒加载，爽不爽？

不仅可以满足之前的需求，而且还减少了一部分js的加载，更好的减少页面的体积。最最最关键的是，不影响搜索引擎的抓取。

新旧对比

之前都是自定义个data-src这种类似的方式来实现懒加载，src放的是一张很小的默认图，这样搜索引擎就不能很好的抓取了。

<img src="default.jpg" data-src="/upload/xxx.jpg" alt="" class="lazyload"/>

而且，还有考虑并发的问题，有的插件实现了懒加载，但如果窗口有过多的图片时，会一股脑的加载出来，瞬间的并发给服务器造成压力，而且带宽消耗过于集中，会影响其他人的访问。

现在，直接使用使用img的loading属性即可实现懒加载。

<img src="/upload/xxx.jpg" alt="" loading="lazy"/>

loading属性有两个值：

• lazy：延迟加载图像，直到满足某些条件，如：图片出现在可视访问内或即将出现。

• eager：立即加载图像。

浏览器支持

常见问题

可以更改图片懒加载触发的距离吗？

这些值是硬编码的，无法通过API更改。不过，以后可能会，各浏览器也在不断尝试不同的阈值距离和变量。

背景图片可以使用loading属性吗？

不可以，只能将与<img>标签一起使用。

loading 能否处理不可见的图片？

针对 display: none 样式设置，不管是在图片元素上，还是父元素上，Chrome、Safari 和 Firefox都不加载。

针对 opacity:0 样式设置，仍会触发加载图片。

如何判断浏览器是否支持延迟加载？

所有主流浏览器都支持浏览器级图片延迟加载。

如果需要支持更多浏览器，或者想要更好地控制延迟加载阈值，可以使用第三方库延迟加载图片。

可以使用 loading 属性来检测浏览器是否支持该功能：

if('loading' in HTMLImageElement.prototype){  
    //支持延迟加载
}else{
  //不支持，需使用三方库实现
}

演示demo：看这里