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

相关推荐
卷帘依旧13 分钟前
useImperativeHandle的作用
前端
卷帘依旧20 分钟前
Hooks在Fiber上的存储原理
前端
you458022 分钟前
学成在线--day02 CMS前端开发(含Vue基础知识得回顾)
前端·javascript·vue.js
想吃火锅100527 分钟前
【leetcode】1.两数之和js版
javascript·算法·leetcode
xiaofeichaichai29 分钟前
虚拟 DOM
前端·javascript·vue.js
2401_8784545334 分钟前
前端高频得手写题
前端
JohnnyDeng941 小时前
【Android】Room 数据库高级用法与性能调优:从查询瓶颈到毫秒级响应
android·性能优化·kotlin·room
初一初十1 小时前
vue3实现的纯前端护肤品商城网站
前端·javascript·vue.js·前端框架
卷帘依旧1 小时前
React状态管理方案怎么选
前端
zeqinjie1 小时前
Flutter 折叠屏 iPad / 宽屏适配实践
android·前端·flutter