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

相关推荐
老王Bingo3 分钟前
Qwen Code + Chrome DevTools MCP,让爬虫、数据采集、自动化测试效率提升 100 倍
前端·爬虫·chrome devtools
董世昌4128 分钟前
什么是扩展运算符?有什么使用场景?
开发语言·前端·javascript
Yaru1132 分钟前
Vue 3.6 预览版特性
javascript·vue.js
美狐美颜SDK开放平台40 分钟前
直播美颜sdk源码解析:动态贴纸功能开发与性能优化
性能优化
来杯三花豆奶41 分钟前
Vue 3.0 Mixins 详解:从基础到迁移的全面指南
前端·javascript·vue.js
想学后端的前端工程师1 小时前
【React性能优化实战指南:从入门到精通-web技术栈】
前端·react.js·性能优化
白兰地空瓶1 小时前
React Hooks 深度理解:useState / useEffect 如何管理副作用与内存
前端·react.js
cike_y1 小时前
JSP内置对象及作用域&双亲委派机制
java·前端·网络安全·jsp·安全开发
巴拉巴拉~~2 小时前
KMP 算法通用进度条组件:KmpProgressWidget 多维度 + 匹配进度联动 + 平滑动画
java·服务器·前端
子洋2 小时前
AI Agent 介绍
前端·人工智能·后端