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

相关推荐
whinc5 小时前
JavaScript技术周刊 2026年第18周
javascript
码海扬帆:前端探索之旅5 小时前
深度定制 uni-combox:新增功能详解与实战指南
前端·vue.js·uni-app
谷雨不太卷5 小时前
进程的状态码
java·前端·算法
打小就很皮...5 小时前
基于 Python + LangChain + RAG 的知识检索系统实战
前端·langchain·embedding·rag
whinc5 小时前
JavaScript技术周刊 2026年第17周
javascript
BJ-Giser5 小时前
Cesium 烟雾粒子特效
前端·可视化·cesium
空中海5 小时前
02 ArkTS 语言与工程规范
java·前端·spring