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

相关推荐
BD_Marathon1 分钟前
Router_路由的基本使用
javascript
float_六七7 分钟前
行级与块级元素:核心区别与应用场景
开发语言·前端·javascript
毕设十刻20 分钟前
基于Vue的家教预约系统7fisz(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
前端无涯23 分钟前
深度解析:fetch 与 Promise 结合实战及面试重点
前端·javascript
风舞红枫25 分钟前
node代理vue打包后的文件,实现本地测试
前端·javascript·vue.js·node.js
helloCat26 分钟前
记录CI/CD自动化上传AppGallery遇到的坑
android·前端·api
Yanni4Night28 分钟前
使用URLPattern API构建自己的路由器 🛣️
前端·javascript
web守墓人35 分钟前
【前端】garn:使用go实现一款类似yarn的依赖管理器
前端
全栈陈序员41 分钟前
Vue 实例挂载的过程是怎样的?
前端·javascript·vue.js·学习·前端框架
猿小喵1 小时前
TDSQL-MySQL相对MySQL5.7版本主从复制性能优化
数据库·mysql·性能优化