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

相关推荐
五号厂房1 小时前
聊一聊前端下载文件N种方式
前端
code_Bo1 小时前
使用micro-app 多层嵌套的问题
前端·javascript·架构
小灰1 小时前
VS Code 插件 Webview 热更新配置
前端·javascript
进击的明明2 小时前
前端监控与前端兜底:那些我们平常没注意,但真正决定用户体验的“小机关”
前端·面试
前端老宋Running2 小时前
我只改了个头像,为什么整个后台系统都闪了一下?
前端·react.js·面试
r***01382 小时前
SpringBoot3 集成 Shiro
android·前端·后端
八哥程序员2 小时前
深入理解 JavaScript 作用域与作用域链
前端·javascript
前端一课2 小时前
【vue高频面试题】第 11 题:Vue 的 `nextTick` 是什么?为什么需要它?底层原理是什么?
前端·面试
前端一课2 小时前
【vue高频面试题】第 10 题:`watch` VS `watchEffect` 的区别是什么?触发时机有什么不同?
前端·面试
h***34632 小时前
SpringBoot3.3.0集成Knife4j4.5.0实战
android·前端·后端