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去详细查看!!!

相关推荐
IT_陈寒3 分钟前
SpringBoot性能优化完全指南
前端·人工智能·后端
溪语流沙18 分钟前
【每天一个CSS | Day33】聚焦即弹出的命令面板
前端·css·html5·组件·每日一练
燕落南枝26 分钟前
CSS 用户行为伪类::hover 与 :focus 详解
前端·css
风骏时光牛马30 分钟前
业务基础信息管理库
前端
zyxqyy&∞40 分钟前
sqli-labs-布尔盲注 (Less-8),时间盲注 (Less-9~10)
前端
m0_敲代码的彭于晏1688 小时前
Vercel 前端部署平台深度评测
前端
怕浪猫9 小时前
外包和大厂的前端代码,差在凌晨三点
前端·面试·github
m0_敲代码的彭于晏1689 小时前
Vercel 前端部署与全栈开发实战指南
前端·状态模式
徐小夕9 小时前
花了3个月,我们做了一款 AI 版的“飞书文档”
前端·算法·github
贾伟康10 小时前
【化学实验室|17】HarmonyOS ArkTS 亮暗色与视觉令牌实战:集中颜色、间距和交互状态避免页面割裂
前端·移动开发·harmonyos·arkts·arkui