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

相关推荐
Patrick_Wilson23 分钟前
router.replace 之后紧跟 reload,页面为什么无限刷新?
javascript·react.js·浏览器
小小小小宇39 分钟前
OpenMemory MCP
前端
和平宇宙1 小时前
AI笔记005. hermes-DeepSeek V4 Pro, 128K上下文引发的探索
前端·人工智能·笔记
IT_陈寒1 小时前
Redis持久化这个坑,我爬了一整天才出来
前端·人工智能·后端
naildingding2 小时前
3-ts接口 Interface
前端·typescript
mONESY2 小时前
JavaScript 栈、队列、数组与链表核心知识点总结
javascript·面试
小小前端仔LC2 小时前
Node.js + LangChain + React:搭建个人知识库(六)- “吃什么”项目实战:从700+菜谱入库到Taro H5端JSON渲染
前端·后端
ZengLiangYi2 小时前
TypeScript 项目配置:tsconfig、ESM、路径别名
javascript·typescript·aigc
JohnnyDeng942 小时前
【鸿蒙】ArkUI 列表性能优化:LazyForEach 与组件复用深度解析
性能优化·harmonyos·arkts·鸿蒙·arkui
晓13132 小时前
【Cocos Creator 3.x】篇——第二章 入门
前端·javascript·游戏引擎