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

相关推荐
前端一课2 分钟前
解释watch和computed的原理
前端·面试
前端一课4 分钟前
【vue高频面试题】第 18 题:Vue3 响应式原理中的 effect、依赖收集与依赖触发
前端·面试
前端一课4 分钟前
【vue高频面试题】第 19 题:Vue3 性能优化技巧
前端·面试
前端一课7 分钟前
【vue高频面试题】第 15 题:computed vs watch 区别 + 使用场景
前端·面试
前端一课7 分钟前
【vue高频面试题】第 20 题:Vue3 生命周期 + watch 执行顺序
前端·面试
前端一课7 分钟前
【vue高频面试题】第 16 题:Vue3 响应式原理深度解析(Proxy + effect 栈 + 依赖追踪)
前端·面试
执笔论英雄11 分钟前
【大模型推理】小白教程:vllm 异步接口
前端·数据库·python
炒毛豆11 分钟前
vue3+ant design vue实现表单验证失败后,自动滚动到失败的位置(scrollToField)
前端·javascript·vue.js
木易 士心18 分钟前
Error: Module ‘@npmcli/config’ not found — 如何解决?
javascript·npm
IT_陈寒20 分钟前
Vite 5个隐藏功能大揭秘:90%的开发者都不知道这些提速技巧!
前端·人工智能·后端