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

相关推荐
泥秋哥7 分钟前
微前端-Module Federation运行时工具
前端·架构
小黑蛋9129 分钟前
Nacos 集群部署方案
前端
PILIPALAPENG9 分钟前
第4周 Day 4:Agent 工作流模式——编排复杂流程
前端·人工智能·python
KaMeidebaby14 分钟前
卡梅德生物技术快报|蛋白的过表达质粒构建与生信分析实验全流程复盘
前端·数据库·其他·百度·新浪微博
ricardo197321 分钟前
代码分割 + 路由懒加载 + 字体子集化:前端瘦身三板斧
前端·面试
dsyyyyy110126 分钟前
CSS 2D 效果、3D 效果 与 Animation 总结
前端·css·3d
jerrywus27 分钟前
Vibe Coding 实战:三天,一个人,一个 Claude Session Viewer——给三家 AI CLI 当统一会话浏览器
前端·claude·gemini
心中有国也有家29 分钟前
PaddlePaddle 适配 NPU 的技术全解析——从算子接入到端到端性能优化
人工智能·分布式·算法·性能优化·架构·paddlepaddle
GISer_Jing30 分钟前
Three.js渲染架构:从WebGL到WebGPU的演进
javascript·架构·webgl
lichenyang45330 分钟前
HarmonyOS AI 聊天模块架构复盘:从 UI、状态、Controller 到 Provider、SSE 与业务卡片
前端