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

相关推荐
吃口巧乐兹2 分钟前
异步异常处理:AggregateException 的拆解与最佳实践
javascript
柒和远方7 分钟前
每日一学V017:用 Prompt 做 NLP:解构赋值与 AI 全栈的第一次实战
javascript·架构·代码规范
鹿青13 分钟前
给设计稿做体检:我搓了个 Skill,专治 Figma 转代码出垃圾
前端·claude·视觉设计
陈_杨17 分钟前
鸿蒙APP开发:足球战术App怎么做拖拽交互?球员拖动与路线绘制
前端
陈_杨20 分钟前
鸿蒙APP开发:如果你想在鸿蒙App里做属性动画,@ohos.animator怎么用
前端
陈_杨21 分钟前
鸿蒙APP开发:篮球App怎么画球场?鸿蒙Canvas绘图实战
前端
colofullove22 分钟前
前端工程搭建与用户访问流程设计
前端
广州华水科技30 分钟前
如何利用单北斗GNSS系统实现大坝的变形监测?
前端
砍材农夫33 分钟前
物联网实战:Spring Boot MQTT | 模拟器Paho客户端拆解高性能
java·javascript·spring boot·后端·物联网·struts
代码小库1 小时前
【2026前端最新面试题——day10】JavaScript 高频面试题
开发语言·前端·javascript