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

相关推荐
京东云开发者24 分钟前
全球首个!京东全栈开源JoyAI-VL-Interaction,让大模型从“一问一答”走向“边看边说”
前端
京东云开发者24 分钟前
正式上线!京东云AI智能渗透测试服务
前端
zzzzzz31028 分钟前
当甲方说'logo放大的同时再缩小一点'时,我用 AI 把这个需求做出来了
javascript·css·程序员
AprChell28 分钟前
低代码设计器和低代码设计引擎架构综述
前端·vue.js·低代码
Hilaku34 分钟前
Node.js 还能再战十年?给你一个不换引擎的理由
前端·javascript·程序员
颜进强42 分钟前
AI性能参数-截断、延迟与流式输出
前端·后端·ai编程
spmcor1 小时前
React 架构师之路:Next.js 全栈革命(第八篇)
前端·react.js
英勇无比的消炎药1 小时前
TinyRobot 源码深度分析:OpenTiny 的 AI 对话组件库
前端·vue.js·github
假如让我当三天老蒯1 小时前
React基础、进阶(学习用)
前端·react.js·面试
风骏时光牛马1 小时前
HTML十大经典实战代码案例合集
前端