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

相关推荐
失迭19 小时前
Cloudflare Tunnel + Zero Trust 稳定接入 Netcup VPS SSH
前端·javascript·github
不会敲代码119 小时前
别再背柯里化面试题了,看完这篇你自己也会写
javascript·算法·面试
一叶渡江19 小时前
Ghost docker安装踩坑
前端·cms
光影少年19 小时前
CSS盒模型是什么?box-sizing有什么作用?
前端·css
Dev7z19 小时前
基于晶体塑性理论的FCC单晶本构模型数值实现与验证(硕士级别)
前端
前端嘣擦擦19 小时前
避坑笔记:Chrome 144+ SVG 事件失效问题
前端·javascript·chrome·笔记·svg2
秋天的一阵风19 小时前
🧠 空数组的迷惑行为:为什么 every 为真,some 为假?
前端·javascript·面试
渔舟唱晚@19 小时前
React 19 核心 Hooks 深度解析
前端·react.js·前端框架
Mintopia19 小时前
AI 开发还是 AI 辅助开发?——我近月的实践感受与技术建议
前端
Mintopia19 小时前
下面列出若干真实世界和典型的成功实施 AI 开发(即 AI 作为产品或业务核心驱动力)案例
前端