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

相关推荐
两只羊ovo12 分钟前
前端八股之 storage & this:两个最容易卡住的点,一次讲透
前端
用户9210802628625 分钟前
Bubble 打字机效果实践:从项目配置到源码实现
前端
张元清42 分钟前
React useEventListener Hook:类型安全的 DOM 事件监听 (2026)
javascript·react.js
weixin_461408581 小时前
npm npx yarn
开发语言·前端·javascript
四千岁1 小时前
RAG系统中的分块
前端·javascript·后端
START_GAME1 小时前
MSSQL$SQL2016
java·服务器·前端
Captaincc1 小时前
Show me your works & token -稀土掘金上线内测作品广场和用量统计
前端·掘金社区·vibecoding
进击的明明2 小时前
闭包:JavaScript里的“随身背包” 🎒
前端·javascript·面试
紫幽3 小时前
从 0 用 Vue 做屏并生成 LVGL 单片机代码(完整源码备忘)
前端·单片机