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 小时前
鸿蒙智能体开发实战:39.鸿蒙壁纸大师 - 前端卡片显示与交互优化
前端·华为·交互·harmonyos·鸿蒙·火山引擎
顾昂_10 小时前
内存泄漏排查和 Chrome DevTools 使用教程
前端·javascript·面试
IT_陈寒11 小时前
Java线程池这个坑我算是踩明白了
前端·人工智能·后端
An_s11 小时前
rust开发wasm与浏览器(js)交互
javascript·rust·wasm
山河木马12 小时前
GPU自动处理专题4-填充覆盖区域(光栅化)
javascript·webgl·计算机图形学
悦儿遥遥雨112 小时前
PXE + Kickstart 无人值守批量部署系统
linux·javascript·nginx
315356691312 小时前
Superpowers:GPT-5.6 时代下的流程毒瘤
前端·后端
清秋12 小时前
全网最全 ECMAScript 攻略( 更新至 ES2026)
前端·javascript·编程语言
cfm_291412 小时前
SpringMVC全局异常处理性能优化
spring boot·性能优化
Cao_Ron13 小时前
用 SVG image symbol 画 ECharts graph 圆形节点
前端