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

相关推荐
丷丩6 分钟前
MapLibre GL JS第33课:渲染世界副本
javascript·gis·map·mapbox·maplibre gl js
前端环境观察室7 分钟前
别让 Agent 浏览器任务无限重试:失败分类、RetryPolicy 与人工复核
前端
bonechips7 分钟前
深入理解 JavaScript的历史包袱——变量提升(Hoisting)
javascript·深度学习
喵个咪14 分钟前
Headless 后端实践:基于Go的企业级多栈管理系统脚手架
前端·vue.js·react.js
m0_7381207216 分钟前
渗透测试基础——黑盒测试下的Web漏洞挖掘与利用解析(一)
服务器·前端·网络·安全·php
丷丩1 小时前
MapLibre GL JS第31课:添加实时数据
javascript·gis·map·mapbox·maplibre gl js
candyTong1 小时前
Claude Code 每次调用 API 时,上下文是怎么"拼"出来的?
javascript·后端·架构
java_cj1 小时前
数据库范式化设计与性能优化全攻略
数据库·后端·性能优化·架构·开源
小林ixn1 小时前
别再背“变量提升”了!深入编译执行,彻底搞懂 JavaScript 运行机制
javascript
用户852495071841 小时前
为什么变量能 未定义先使用?
javascript·程序员