JavaScript懒加载_图片与组件延迟加载-js教程-PHP中文网

JavaScript懒加载_图片与组件延迟加载

夜晨

发布： 2025-11-29 20:01:02

原创

795人浏览过

JavaScript懒加载通过延迟加载图片和组件优化页面性能。1. 图片懒加载：利用Intersection Observer API或scroll事件监听，当图片接近视口时将data-src赋值给src实现按需加载；2. 组件懒加载：使用dynamic import()动态引入组件，结合React.lazy与Suspense实现路由或交互组件的异步加载，降低首屏体积，提升渲染速度。

javascript懒加载_图片与组件延迟加载

页面加载性能直接影响用户体验，尤其在图片多或组件复杂的情况下。JavaScript 懒加载是一种优化手段，让资源在需要时才加载，减少初始请求压力。重点在于：图片延迟加载和组件动态引入。

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

当页面包含大量图片时，一次性加载所有图像会拖慢首屏速度。通过懒加载，只有进入视口附近的图片才会发起请求。

实现方式主要有两种：

Intersection Observer API：现代浏览器推荐方案，监听元素是否进入可视区域。
scroll + getBoundingClientRect：兼容性更好，但性能稍差，适合低版本环境。

基本做法是将真实图片地址存于 data-src 属性，初始用占位图。当检测到元素接近可视区，再把 data-src 赋给 src。

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

组件延迟加载：拆分逻辑，提升响应速度

对于功能模块或交互组件（如评论区、弹窗、图表），不必在页面打开时全部加载。可使用动态导入（dynamic import()）实现按需加载。

延迟加载图片插件Lazy Load XT

查看详情

常见场景包括：

点击按钮后才加载对应功能模块
路由切换时异步加载页面组件（React 中的 React.lazy + Suspense）
滚动到特定区域再渲染复杂组件

这种方式能显著降低首页包体积，加快首屏渲染。

实际代码示例

图片懒加载简单实现：

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

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

登录后复制

组件懒加载（React 示例）：

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function MySection() {
  return (
    <React.Suspense fallback="加载中...">
      <LazyComponent />
    </React.Suspense>
  );
}

登录后复制

基本上就这些。核心思路是“先少载，后补上”，合理使用能让页面更轻快。

以上就是JavaScript懒加载_图片与组件延迟加载的详细内容，更多请关注php中文网其它相关文章！