为页面<div>元素实现整元素懒加载，求插件或自定义JS代码

区块做懒加载，而不是只处理里面的图片，对吧？这种场景太常见了，尤其是当div里包含图文混排、甚至动态组件的时候。下面给你分享两种靠谱的方案，都是生产环境能用的：

现代浏览器都支持原生的Intersection Observer API，它能高效监听元素是否进入视口，完全不需要依赖第三方库，灵活度拉满。

步骤1：设置基础样式 #

先给懒加载的div加初始隐藏样式，加载完成后再显示：

/* 初始状态：隐藏元素 */
.lazy-container {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* 可选：加个最小高度避免页面布局跳动 */
  min-height: 200px;
}

/* 加载完成后：显示元素 */
.lazy-container.loaded {
  opacity: 1;
  visibility: visible;
}

/* 可选：加载占位符样式，比如骨架屏 */
.loading-skeleton {
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

步骤2：编写HTML结构 #

给目标div加上lazy-container类，还可以用data-src存储动态内容的地址（如果需要加载远程内容的话）：

<div class="lazy-container" data-src="/path-to-your-content.html">
  <!-- 加载占位符 -->
  <div class="loading-skeleton"></div>
</div>

步骤3：编写JavaScript逻辑 #

用Intersection Observer监听这些div，当它们进入视口时，要么显示已有的内容，要么动态加载内容：

document.addEventListener('DOMContentLoaded', function() {
  const lazyContainers = document.querySelectorAll('.lazy-container');

  // 先检查浏览器是否支持Intersection Observer
  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries, observerInstance) => {
      entries.forEach(entry => {
        // 当元素进入视口时触发
        if (entry.isIntersecting) {
          const container = entry.target;

          // 场景1：如果div里的内容是预写好的，只需要显示它
          // container.classList.add('loaded');

          // 场景2：如果需要动态加载远程内容（比如AJAX）
          fetch(container.dataset.src)
            .then(response => {
              if (!response.ok) throw new Error('请求失败');
              return response.text();
            })
            .then(html => {
              container.innerHTML = html;
              container.classList.add('loaded');
            })
            .catch(error => console.error('加载内容出错:', error));

          // 监听一次后就取消，避免重复触发
          observerInstance.unobserve(container);
        }
      });
    }, {
      // 提前200px开始加载，避免用户看到延迟
      rootMargin: '200px 0px',
      // 当元素有10%进入视口时触发
      threshold: 0.1
    });

    // 开始监听所有懒加载容器
    lazyContainers.forEach(container => observer.observe(container));
  } else {
    // 兼容旧浏览器（比如IE11）：直接加载所有内容
    lazyContainers.forEach(container => {
      container.classList.add('loaded');
      // 如果需要动态加载，这里也可以执行fetch逻辑
    });
  }
});

这个方案的优点是完全无依赖、性能好，而且你可以完全自定义加载逻辑（比如加载动画、错误处理）。

如果你不想写太多自定义代码，可以用lozad.js——这是一个超轻量（只有~500字节）的懒加载库，专门支持任意元素的懒加载，不止图片。

用法步骤 #

1. 先下载lozad.js（或者直接引入它的脚本）
2. 复用方案一中的CSS样式，然后修改HTML和JS：

<div class="lazy-container" data-lozad data-src="/path-to-your-content.html">
  <div class="loading-skeleton"></div>
</div>

// 如果是通过脚本引入，直接用全局变量lozad
document.addEventListener('DOMContentLoaded', function() {
  const observer = lozad('.lazy-container', {
    // 元素进入视口时触发的回调
    load: function(el) {
      // 动态加载内容（可选）
      fetch(el.dataset.src)
        .then(response => response.text())
        .then(html => {
          el.innerHTML = html;
          el.classList.add('loaded');
        });
      // 如果只是显示已有内容，直接加类：el.classList.add('loaded');
    },
    // 提前加载的边距
    rootMargin: '200px 0px'
  });

  // 启动监听
  observer.observe();
});

lozad.js的好处是帮你封装了Intersection Observer的细节，代码更简洁，适合快速开发，而且兼容性也做了处理。

• 占位符很重要：一定要给懒加载的div加占位符（比如骨架屏），避免页面布局跳动，提升用户体验。
• 提前加载：设置rootMargin让内容在进入视口前就开始加载，这样用户滚动到的时候内容已经准备好了。
• 兼容性：如果需要支持IE11，可以给Intersection Observer加polyfill（不过现在IE11的市场份额已经很低了，大部分项目可以忽略）。

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