首页 > 其他分享 >图片懒加载

图片懒加载

时间:2023-09-05 17:01:49浏览次数:28  
标签:index img imgList deleteIndexList imgLazyLoad let 加载 图片

点击查看代码
let imgList = [...document.querySelectorAll('img')]
let length = imgList.length
const imgLazyLoad = function() {
let count = 0
return (function() {
let deleteIndexList = []
imgList.forEach((img, index) => {
let rect = img.getBoundingClientRect()
if (rect.top < window.innerHeight) {
img.src = img.dataset.src
deleteIndexList.push(index)
count++
if (count === length) {
document.removeEventListener('scroll', imgLazyLoad)
}
}
})
imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
})()
}

最好加上防抖
document.addEventListener('scroll', imgLazyLoad)

标签:index,img,imgList,deleteIndexList,imgLazyLoad,let,加载,图片
From: https://www.cnblogs.com/wan-cb/p/17680143.html

相关文章

  • python 图片插入表格
    图片插入表格自动化媲美vbaimportosfromPILimportImagefromdocximportDocumentfromdocx.sharedimportInches#创建空白的Word文档doc=Document()#获取所有图片文件路径image_folder=r"E:\东\全部二维码-------11"image_files=[os.path.join(imag......
  • springboot加载bean失败:No matching autowired candidates found
    场景:之前在培训轮岗,一直没有干活,最近开始干活遇到xxljob,打算自己学习了解一下。在按照文档配置执行器项目时,发现怎么启动,xxlJobExecutor都没有被加载进来。解决:后来经过查阅,原来是springBoot启动默认扫描的是启动类所在的包以及其子包,而我的文件为:因此bean注入失败。把......
  • 图片加载框架:Glide实现原理
    Glide图片加载框架的实现原理是基于三个主要组件:RequestManager、Request和Engine。RequestManager是Glide的入口类,负责管理和协调图片加载请求。Request是一个请求的封装类,包含了图片加载所需的各种参数和配置。Engine是Glide的核心引擎,负责实际的图片加载和缓存工作。 具体......
  • 前端实现图片验证效果
    效果图://页面执行<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>图形验证码</title></head><body><divid="v_container"style="width:20......
  • springboot启动错误: 找不到或无法加载主类
    当在eclipse启动springboot项目时出现问题:springboot错误:找不到或无法加载主类解决办法:1,通过cmd命令行,进入项目目录进行,mvncleaninstall进行编译项目install后,再到eclipse上选中项目按F5刷新项目。再运行即可问题解决。2,在eclipse上选中项目 点击clean清理项目再运行问......
  • 三维模型OBJ格式轻量化压缩在大规模场景的加载和渲染的作用分析
    三维模型OBJ格式轻量化压缩在大规模场景的加载和渲染的作用分析 OBJ格式是一种常用的三维模型文件格式,它存储了三维模型的几何信息和纹理坐标等相关属性。在大规模场景中加载和渲染三维模型时,OBJ格式的轻量化压缩对于提高性能和效率起到了重要的作用。首先,使用OBJ格式的轻量......
  • Golang Gorm 一对多查询 preload预加载
    预加载示例GORM允许使用 Preload通过多个SQL中来直接加载关系,例如:typeUserstruct{gorm.ModelUsernamestringOrders[]Order}typeOrderstruct{gorm.ModelUserIDuintPricefloat64}//查找user时预加载相关Orderdb.Preload("Orders").Fin......
  • 直播带货源码,iOS 获取图片主题色
    直播带货源码,iOS获取图片主题色 -(void)getMostColorFormImage:(UIImage*)image{  WEAKSELF  [imagegetPaletteImageColorWithMode:ALL_MODE_PALETTEwithCallBack:^(PaletteColorModel*recommendColor,NSDictionary*allModeColorDic,NSError*error){   ......
  • Power BI:如何在报告中使用超链接 - 文本框/按钮/图片篇
    前面介绍了PowerBI在table/Matrix表中如何使用超链接。有些读者询问PowerBI是否支持在文本框/按钮/图片方式下使用超链接功能?其实读者询问的这些超链接的使用,在工作中属于比较常见的操作。 下面将介绍文本框/按钮/图片超链接的配置方式。一,文本框配置超链接,操作......
  • vue中引入图片等静态资源的几种方式
    在vue中引入图片等静态资源,由于部署的时候需要打包,打包后文件名字路径不一致,导致显示不了。以下为解决的几种方式:1.样式直接引入:<divclass="imgItem"><divclass="imgLogo"></div></div>.imgLogo{width:100px;height:100px;background:url('/@......