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

相关推荐
Sayai11 分钟前
不重新打包,vim 直接改 jar 包内的前端文件:原理、步骤与避坑
前端·vim·jar
IT_陈寒16 分钟前
SpringBoot自动配置失效时我差点把电脑扔了
前端·人工智能·后端
李少兄16 分钟前
JavaScript 对象完全指南
开发语言·javascript·ecmascript
何何____30 分钟前
web方向js考核题解
开发语言·前端·javascript
风骏时光牛马31 分钟前
AI面试复盘:沉淀经验,找准求职短板
前端
liangshanbo121531 分钟前
面试题终极整理:手写 Promise.all / Promise.allSettled
前端·javascript·promise
心易行者31 分钟前
用HTML在线运行搭后台管理系统:5个核心模块+0服务器,3天跑通完整业务
大数据·前端·网络·人工智能·python
单线程1213842 分钟前
从案例分析 Vue3 Tokenizer+Parser 源码五
前端·javascript·vue.js
神奇的程序员1 小时前
Apple Watch S12,送一台
前端
moonsims2 小时前
Voliro 无人机-Aerial Mobile Robot(空中移动机器人):把无人机从“飞过去拍摄”,升级成“飞过去并与目标物理接触、测量甚至操作”
前端·人工智能·安全·无人机·量子计算