JS如何实现懒加载_JavaScript图片与内容懒加载实现方法教程-js教程-PHP中文网

JS如何实现懒加载_JavaScript图片与内容懒加载实现方法教程

星夢妙者

发布： 2025-11-14 23:09:06

原创

320人浏览过

懒加载通过延迟加载非关键资源提升性能，其核心是将图片真实地址存于data-src中，待进入视口时再赋值给src。传统实现依赖scroll事件和getBoundingClientRect判断可见性，但频繁触发影响性能；现代方案采用Intersection Observer API异步监听元素交叉状态，更高效流畅。除图片外，评论区、长列表等内容模块也可延迟加载，如滚动到底部时请求新数据实现无限滚动。注意事项包括：为旧浏览器引入Intersection Observer polyfill、设置图片容器固定尺寸防布局偏移、避免对首屏关键图片使用懒加载，并可结合原生loading="lazy"属性作为降级方案。合理应用懒加载能显著减少初始请求压力、节省带宽、提升用户体验。

js如何实现懒加载_javascript图片与内容懒加载实现方法教程

页面加载速度直接影响用户体验，尤其当页面包含大量图片或内容时，一次性加载所有资源会显著拖慢首屏渲染。懒加载（Lazy Load）是一种优化技术，它让图片或内容在需要时才加载，比如进入视口才开始加载图片，从而减少初始请求压力、节省带宽、提升性能。

一、JavaScript 图片懒加载原理

图片懒加载的核心思想是：不直接将真实图片地址写在 src 属性中，而是先用一个占位图或空白代替，把真正的图片路径存放在自定义属性如 data-src 中。当图片元素即将进入可视区域时，再通过 JavaScript 将 data-src 的值赋给 src，触发图片加载。

示例代码：

<img class="lazy"  alt="图片1">
<img class="lazy"  alt="图片2">

登录后复制

function lazyLoad() {
  const images = document.querySelectorAll('.lazy');
  const viewportHeight = window.innerHeight;

  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    // 判断图片是否接近视口（提前 100px 加载）
    if (rect.top < viewportHeight + 100) {
      if (img.dataset.src) {
        img.src = img.dataset.src;
        img.classList.remove('lazy'); // 防止重复处理
      }
    }
  });
}

// 页面加载和滚动时触发检测
window.addEventListener('load', lazyLoad);
window.addEventListener('scroll', lazyLoad);

登录后复制

上述代码使用 getBoundingClientRect() 获取元素相对于视口的位置，判断其是否进入可视范围。加上一定的提前量（+100px），可以提升用户体验，避免用户看到空白等待。

立即学习“Java免费学习笔记（深入）”；

二、使用 Intersection Observer 提升性能

传统方式绑定 scroll 事件可能导致频繁触发，影响性能。现代浏览器推荐使用 Intersection Observer API，它能异步监听元素与视口的交叉状态，性能更好。

优化后的懒加载实现：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      if (img.dataset.src) {
        img.src = img.dataset.src;
        img.classList.remove('lazy');
      }
      observer.unobserve(img); // 加载后停止监听
    }
  });
});

// 监听所有懒加载图片
document.querySelectorAll('.lazy').forEach(img => {
  imageObserver.observe(img);
});

登录后复制

这种方式无需手动计算位置，也不依赖 scroll 事件，浏览器会在合适时机通知回调，更加高效且流畅。

三、内容懒加载：延迟加载模块化区块

除了图片，网页中的评论区、长列表、广告模块等也可以采用懒加载。例如，某个“查看更多”按钮点击后才加载后续内容，或者某个模块进入视口才发起请求。

示例：滚动到底部加载更多内容

let page = 1;
const container = document.getElementById('content-container');

function loadMoreContent() {
  // 模拟异步请求
  fetch(`/api/content?page=${page}`)
    .then(res => res.json())
    .then(data => {
      if (data.length === 0) {
        window.removeEventListener('scroll', handleScroll);
        return;
      }
      data.forEach(item => {
        const div = document.createElement('div');
        div.textContent = item.text;
        container.appendChild(div);
      });
      page++;
    });
}

function handleScroll() {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 50) {
    loadMoreContent();
  }
}

window.addEventListener('scroll', handleScroll);
loadMoreContent(); // 首次加载

登录后复制

这种“无限滚动”模式常见于社交动态、新闻流等场景，有效控制初始加载量。

四、注意事项与兼容性处理

对于不支持 Intersection Observer 的旧浏览器（如 IE），可引入 polyfill：Intersection Observer Polyfill
图片容器应预设宽高，防止加载时布局跳动
可结合 loading="lazy" 原生懒加载属性作为降级方案：<img loading="lazy" src="xxx.jpg">
避免对首屏关键图片使用懒加载，以免影响核心体验

基本上就这些。合理使用懒加载，能让页面更轻快，用户感知更流畅。关键是根据业务场景选择合适的实现方式，优先考虑性能与兼容性的平衡。

以上就是JS如何实现懒加载_JavaScript图片与内容懒加载实现方法教程的详细内容，更多请关注php中文网其它相关文章！