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

相关推荐
Mh22 分钟前
我决定写一个 3D 地球仪来记录下我要去的地方
前端·javascript·动效
yaoxin52112331 分钟前
390. Java IO API - WatchDir 示例
java·前端·python
懒狗小前端39 分钟前
做了一个 codex 的中文文档网站,做的不好可以随便喷
前端·后端
头发够用的程序员1 小时前
从滑动窗口到矩阵运算:img2col算法基本原理
人工智能·算法·yolo·性能优化·矩阵·边缘计算·jetson
. . . . .2 小时前
ref、useRef 和 forwardRef
前端·javascript·react.js
energy_DT2 小时前
2026年海上钻井平台数字孪生平台:引领海洋能源数字化转型
前端
Eric_见嘉2 小时前
在职前端 Agent 配置分享
前端·后端·agent
柚子8162 小时前
break跳出语句块的神奇技巧
前端·javascript
ejinxian4 小时前
Rust GUI框架Azul与Electron、WebView2
前端·javascript·electron
IT_陈寒4 小时前
Vue的v-for里用index当key,我被自己坑惨了
前端·人工智能·后端