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

相关推荐
Htr_4 分钟前
Anysite.io 使用指南:把整个 Web 变成 AI 智能体的数据库
前端·数据库·人工智能
知兀7 分钟前
【前端】受控和非受控组件
前端·javascript·react
玉宇夕落8 分钟前
别再把 SSE 当普通流式了!从 EventSource 到 LangChain,一次讲透实时推送与流式输出
前端
CappuccinoRose10 分钟前
专项事件体系
前端·学习·网络状态·表单事件·剪贴板事件·拖放事件·页面可见性
李剑一15 分钟前
各位产品经理求你们优化一下吧,暗黑模式最大的BUG!文中附解决方案
前端
晴天1618 分钟前
JavaScript 与 Java 垃圾回收机制对比
java·开发语言·javascript
huali37 分钟前
vue-split-screen:让 Vue Router 的导航轨迹变成两个页面
前端·javascript·vue.js
bug总结1 小时前
uniapp总结
开发语言·前端·javascript
云运维笔记1 小时前
华为VRP系统文件管理全攻略
前端·华为
走到天涯海角1 小时前
pinia和Vuex的区别以及使用pinia
开发语言·前端·javascript