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

阅读34评论0

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

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

1729666821535559.png

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

不仅可以满足之前的需求,而且还减少了一部分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:立即加载图像。

浏览器支持

ChromeEdgeFirefoxSafariOpera
77.079.075.0不支持64.0

常见问题

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

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

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

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

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

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

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

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

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

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

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

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

演示demo:看这里

0 位网友评论:

欢迎来评论

请填写验证码