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

相关推荐
前端缘梦10 小时前
LangGraph 实战:从 0 到 1 构建 AI 代码生成工作流
前端·程序员·全栈
weedsfly10 小时前
栈和堆:JavaScript 内存的“旅馆”和“仓库”
前端·javascript·面试
用户0595401744610 小时前
大模型长上下文遗忘排查实录:用 Playwright 自动化测试,揪出了 90% 的存储序列化 bug
前端·css
36304584110 小时前
Signal 带来的架构问题思考
前端·vue.js
达达尼昂10 小时前
Claude : 如何设计可控的agent-loops
前端·人工智能·后端
半个落月10 小时前
JavaScript 字符串面试题:反转、回文与双指针
javascript
IT_陈寒11 小时前
Redis持久化丢失数据的坑,这次终于被我填平了
前端·人工智能·后端
独泪了无痕12 小时前
Lodash-JavaScript的实用工具库
前端·javascript
有趣的老凌12 小时前
用 Vibe Coding 搭了一个完整小程序「一定能成」
前端·javascript·后端