某处你必须看到这样的功能在Medium上
考虑图像源
我们将在这篇文章中考虑的例子将包含5张或更多图片,但每个图片都会有这种结构
目录
考虑图像源(data-src,与src)
观察员(创建实例并使用此实例观察...DOM元素)
处理交叉路口(条目存储所有匹配的DOM元素,调用loadImage获取图像,然后适当地设置图像的src)
其他考虑事项(模糊转换为清晰时,为图像添加淡入效果)
结论(使用渐进式图片,你可以减少用户资源浪费大量时间来下载内容...@PersonQQ ((1046678249))
* @link ((https://juejin.im/post/5a005392518825295f5d53c8))
* @describe 使用交叉点观察器延迟加载图像以提高性能...在这种情况下,我们希望处理器在图像进入视口后立即被调用(阈值:0.1)
你可以使用观察者观察页面中的所有图像
// 获取图片
const images = document.querySelectorAll...结论
使用渐进式图片,你可以减少用户资源浪费大量时间来下载内容,其实也就是预先加载资源更小的资源,策略就是减少文件的体积,循序渐进的加载,减少带宽,从而提高页面的访问速度,这在面试当中不妨也是一种优化页面性能的答复