如何在卡片div中实现lazy loading？滚动触发加载Google Tag Manager脚本

和图片、iframe的懒加载逻辑本质完全一致，区别仅在于图片和iframe有浏览器提供的loading="lazy"原生属性可以直接调用，普通div没有对应属性。但普通div完全可以通过浏览器原生API实现等价的懒加载效果，不需要依赖第三方库。核心逻辑是初始阶段仅保留div占位结构，不加载内部内容、不触发内部脚本执行，待div进入用户可视范围时，再动态注入需要加载的内容与脚本，整体性能开销极低。

核心实现步骤 #

• 第一步：搭建无内容的初始占位结构
  不要在页面初始加载时就把GTM脚本、其他业务内容硬编码在div内部，只给div保留足够的占位高度，避免加载完成后出现页面布局跳动。给div增加自定义标识属性，方便后续JS识别。
  示例初始结构：

  <!-- 仅占位，无实际可执行内容 -->
  <div 
    data-lazy-div 
    style="min-height: 320px;"
  >
    <!-- 可按需添加骨架屏等占位提示 -->
  </div>
  

• 第二步：用浏览器原生IntersectionObserver监听div的可视状态
  相比传统的scroll事件监听方案，IntersectionObserver是浏览器专门为可视范围检测设计的API，不会造成滚动卡顿。配置时可以设置提前触发的边距，让内容在div露出屏幕前就开始加载，减少用户的等待感知。

• 第三步：触发时动态注入实际内容与脚本
  当监听到div进入可视范围后，先停止对这个div的观察，避免重复触发加载；再动态创建脚本元素、注入GTM相关代码与其他业务内容，让浏览器自动执行注入的逻辑。
  示例实现代码：

  // 初始化可视范围观察器
  const lazyDivObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const target = entry.target;
        // 取消当前元素的观察，防止重复触发
        lazyDivObserver.unobserve(target);
        
        // 动态创建并注入GTM脚本
        const gtmScript = document.createElement('script');
        // 替换为实际的GTM脚本配置，外链脚本设置src，内联脚本设置textContent
        gtmScript.src = "你的GTM脚本地址";
        target.appendChild(gtmScript);
  
        // 若div内还有其他静态业务内容，可直接通过innerHTML注入
        // target.innerHTML = "你原本要放在div内的静态业务内容"
      }
    })
  }, {
    // 提前100px触发加载，优化加载等待感知
    rootMargin: "100px"
  });
  
  // 批量观察所有需要懒加载的占位div
  document.querySelectorAll('[data-lazy-div]').forEach(div => {
    lazyDivObserver.observe(div);
  });
  

常见注意事项 #

• 初始占位div需要设置和实际内容高度接近的min-height，否则内容加载完成后会出现页面大幅位移，造成布局跳动
• 触发加载后必须调用unobserve取消对当前元素的观察，否则会出现脚本重复加载、内容重复渲染的问题
• 若需要兼容极老旧的浏览器，可增加降级判断：如果浏览器不支持IntersectionObserver，直接在页面初始化阶段加载所有div内容，不做懒加载处理

内容的提问来源于stack exchange，提问作者Abner Matheus