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

相关推荐
CHEEVEN_QY3 小时前
新能源汽车电池托盘FSW量产的工艺稳定性控制
java·前端·汽车
Alice-YUE4 小时前
前端 × AI:从 Cursor 到 Transformer,一份完整认知路径
前端·人工智能·transformer·ai编程·前端开发·cursor
Code_Solitude4 小时前
C语言:关于二维数组的作业总结
java·c语言·前端
专业程序开发源4 小时前
django新闻推荐系统70655-计算机课程设计、毕业设计
java·javascript·spring boot·后端·python·django·课程设计
acd120094 小时前
前端随笔:数据明明变了,Vue 页面就是不更新
前端·javascript·vue.js
无名猿5 小时前
移动构造与移动赋值:把资源偷过来
c++·性能优化·内存管理·现代c++·语法基础
传人6 小时前
悬停旋转放大和位移效果如何写
前端·javascript·css
yunwei376 小时前
eBPF 开发实践:使用 eBPF 隐藏进程或文件信息
linux·后端·性能优化
羲云6 小时前
给 Vue 页面加个 Markdown 编辑器:ME.js 的接入、图片粘贴与音视频
javascript·vue.js
zhangzeyuaaa6 小时前
Ruby 方法参数完全指南:默认值、可变参数与关键字参数
前端·python·ruby