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

相关推荐
涔溪几秒前
有哪些常见的Vite插件及其作用?
前端·vue.js·vite
糖墨夕1 分钟前
从一行代码看TypeScript的精准与陷阱:空值合并vs逻辑或
前端·typescript
Junsen7 分钟前
使用 Supabase 实现轻量埋点监控
前端·javascript
Java&Develop10 分钟前
html写一个象棋游戏
javascript·游戏·html
CnLiang17 分钟前
React Compiler Plugin
前端·react.js
willxiao17 分钟前
js 单例模式 6 种实现方式
javascript·设计模式
一只爱吃糖的小羊25 分钟前
React 19 生命周期:从入门到实战的完整指南
前端·react.js
乔伊酱28 分钟前
Bean Searcher 遇“鬼”记:为何我的查询条件偷偷跑进了 HAVING?
java·前端·orm
uu_code00731 分钟前
字节磨皮算法详解
前端
HashTang33 分钟前
【AI 编程实战】第 2 篇:让 AI 成为你的前端架构师 - UniApp + Vue3 项目初始化
前端·vue.js·ai编程