原生的图片和框架懒加载

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

TIP

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

# 使用

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

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

基于 lazy-loading演示

# loading 支持的参数

  • auto

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

  • lazy

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

  • eager

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

# 判断浏览器是否支持

const supportLoading = 'loading' in HTMLImageElement.prototype

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

backdrop-filter 的使用

backdrop-filter 的使用

这个属性可以为一个元素后面区域添加图形效果,如模糊或颜色偏移等

git的一些常用命令

git的一些常用命令

搜集整理一些 git 的常用命令