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

相关推荐
用户5806139393001 分钟前
前端文件下载实现深度解析:Blob与ObjectURL的完美协作
前端
Lin86664 分钟前
Vue 3 + TypeScript 组件类型推断失败问题完整解决方案
前端
coding随想4 分钟前
从零开始:前端开发者的SEO优化入门与实战
前端
前端工作日常7 分钟前
我理解的JSBridge
前端
Au_ust7 分钟前
前端模块化
前端
顺丰同城前端技术团队7 分钟前
还不会用 Charles?最后一遍了啊!
前端
BUG收容所所长8 分钟前
二分查找的「左右为难」:如何优雅地找到数组中元素的首尾位置
前端·javascript·算法
彬师傅8 分钟前
geojson、csv、json 数据加载
前端
用户52709648744909 分钟前
🔥 我与 ESLint 的爱恨纠葛:从"这破玩意儿"到"真香警告"
前端
梨子同志9 分钟前
手动实现 JavaScript 的 call、apply 和 bind 方法
前端·javascript