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

相关推荐
didadida2621 分钟前
第二回: Session Assistant 工具链的三节点设计
javascript·agent
云间寄信6 分钟前
异步编程与事件循环
javascript
喵个咪6 分钟前
基于 Next.js 的 Headless CMS 前端架构:技术解析与二次开发导引
前端·react.js·next.js
阿白同学1054519 分钟前
一座前端文明的地层:React 源码考古报告
前端
七牛云行业应用9 分钟前
别手搓多Agent了!Codex Windows版用Git Worktree并行跑代码,真的香
前端
前端环境观察室10 分钟前
指纹浏览器都用了,为什么任务还是要人盯着?
前端
猎奇不再看10 分钟前
深度解析 Java 双向链表的性能与源码真相
javascript
lichenyang45317 分钟前
鸿蒙聊天 Demo 练习 11:路由拦截器 + dialog 路由 + 页面生命周期
前端
铁皮饭盒19 分钟前
Bun 提供了许多 Node.js 原生没有的专属 API
前端·后端
destinying20 分钟前
前端秒变AI全栈,我的核心资产是一套Node.js“中间件”
前端·后端·面试