J*aScript 懒加载：图片与组件的延迟加载策略_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript 懒加载：图片与组件的延迟加载策略

2025-11-10

浏览次数：次

返回列表

J*aScript懒加载通过延迟加载非关键资源提升性能。利用Intersection Observer API实现图片懒加载，将data-src赋值给src以按需加载；对老旧浏览器可用scroll事件配合防抖降级处理。在React中结合React.lazy()与Suspense、Vue中使用defineAsyncComponent实现组件级懒加载，配合Webpack代码分割优化首屏渲染。需设置rootMargin预加载、预留占位尺寸防布局偏移，并为关键资源禁用懒加载以保障核心体验。

javascript 懒加载：图片与组件的延迟加载策略

在现代网页开发中，性能优化是提升用户体验的关键。J*aScript 懒加载是一种有效策略，通过延迟加载图片或组件，直到它们即将进入视口，从而减少初始页面加载时间、降低资源消耗。尤其对包含大量媒体内容或复杂组件的页面，懒加载能显著改善首屏渲染速度和整体响应性。

图片懒加载：让图像按需加载

传统网页会一次性加载所有图片，即使用户根本没滚动到对应位置。这不仅浪费带宽，还拖慢页面启动。使用懒加载，可以只在图片接近可视区域时才开始加载。

实现方式主要有两种：

利用 Intersection Observer API 监听图片元素是否进入视口。一旦触发，将 data-src 中的真实地址赋给 src，启动加载。
为老旧浏览器提供降级方案，可用 scroll 或 resize 事件配合 getBoundingClientRect() 手动判断位置，但注意添加防抖以避免频繁计算。

示例代码片段：

const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => imageObserver.observe(img));