JavaScript---lazyload图片懒加载处理_IntersectionObserver

IntersectionObserver API兼容性:

部分代码展示:

html 复制代码
  // 懒加载处理
    const imgsElem = document.querySelectorAll('img');
    const topElem = document.querySelector('#top');
    // IntersectionObserver
    const Observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          let img = entry.target;
          img.src = img.dataset.src
          observer.unobserve(img)
        }
      })
    })

    // 绑定监听API
    imgsElem.forEach((img) => {
      Observer.observe(img)
    })

具体代码请点击InsCode去详细查看!!!

相关推荐
Eiceblue11 小时前
使用 Python 实现 Excel 行列转置(保留单元格样式)
前端·python·excel
WeiXin_DZbishe11 小时前
基于Node.js的马拉松赛事管理系统的设计与实现-计算机毕设 附源码【课程设计】90211
java·javascript·vue.js·python·php·课程设计
西西学代码12 小时前
像素和颜色之间的转换(Flutter)
前端·javascript·flutter
茶底世界之下12 小时前
羽毛颜色已经很鲜艳,还要继续加色吗?用 Awaking 试一次减饱和
前端·ios·运营
风早爽太12 小时前
Mac 搭建 Vue 开发环境
前端·vue.js
Lank_M12 小时前
Word图片裁剪转HTML失效,转换器各漏读了哪一层
前端
青烟小生12 小时前
前端架构设计实战:从组件思维到系统思维
前端
时间海87112 小时前
对象键清洗之前,先拦住重名
javascript·后端
玄芯散人12 小时前
【金丹·81】性能分析:你的程序慢在哪
linux·性能优化·perf
Amos_Web12 小时前
Rspack 源码解析(二十):Typed Hook 系统如何靠宏生成
前端·rust·前端框架