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

相关推荐
程序员大阳7 分钟前
副队长JavaScript教程(52)-DOM操作元素的内容
javascript·dom·innertext·innerhtml·value·内容操作
山雀~1 小时前
CSP 安全漏洞修复
前端·网络协议
裕波1 小时前
苏千|从 cnpm 到 Vite+:AI 时代的开发者体验演进
javascript
console.log('npc')2 小时前
周期任务功能完整实现:CRON 编辑器 + 模板变量 + 执行历史
javascript·vue.js·编辑器
程序员大阳2 小时前
副队长JavaScript教程(58)-基于DOM的网页留言板开发
javascript·实例·dom·案例·留言板
陌离2 小时前
Go-Gui:一套 无限接近 现代化UI的 GPU绘制界面组件框架
前端
咚咚咚小柒2 小时前
【前端】LangChain.js学习
前端·javascript·人工智能·typescript·langchain·vue·ai编程
2401_885885042 小时前
巴林语音通知接口如何对接?系统告警语音API接入教程
android·前端·网络·python·语音识别
java1234_小锋2 小时前
【技术专题】CSS3 网页技术 - CSS3 盒模型
前端·css·css3
计算机魔术师2 小时前
手握芯片、又要吞下开源分发入口,英伟达被盯上了
前端