Skip to content

原生的图片和框架懒加载

使用浏览器的原生懒加载来实现对网页内部的图片与框架的懒加载

TIP

这是一个新特性,查看支持浏览器

使用

只需要向 imgiframes 标签增加 loading="lazy 属性即可

html
<img src="img.jpg" loading="lazy">
<iframes src="..." loading="lazy">

基于 lazy-loading演示

loading 支持的参数

  • auto

默认值。图片或框架基于浏览器自己的策略进行加载

  • lazy

图片或框架懒加载,也就是元素资源快要被看到的时候加载

  • eager

图片或框架无视一切进行加载

判断浏览器是否支持

js
const supportLoading = 'loading' in HTMLImageElement.prototype

对与不支持的浏览器,你可以使用其它的方式来实现懒加载

创建时间:

最近更新: