【JS】懒加载

主要思想：“按需加载”，在真正需要这个资源时才加载，而不是一开始就加载全部内容。

一、什么是懒加载？

延迟加载资源（如图片、模块、数据等）

• 图片懒加载：页面滚到某张图片时才加载。
• 组件懒加载：单页应用（SPA，只有一个HTML页面），某个路由或模块访问时才加载对应组件。
• 数据懒加载：如分页加载，只有滑动到底部时才加载下一页数据。

二、懒加载的作用

1. 提升加载速度：初始页面加载更快，用户体验更好
2. 节省带宽和资源：未访问的不加载，减少不必要传输
3. 降低服务器压力：请求按需发送，避免瞬时高并发
4. 提升SEO（有条件）：现代框架支持服务器端渲染结合懒加载，有利于搜索引擎抓取。

三、如何使用懒加载（示例）

1. 图片懒加载（原生方式）

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="示例图片">

或使用 JavaScript 监听滚动：

const imgs = document.querySelectorAll('img[data-src]');

const lazyLoad = () => {
  imgs.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < window.innerHeight) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
};

window.addEventListener('scroll', lazyLoad);

2. React 中组件懒加载

import React, { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

3. Vue 中路由懒加载

const Foo = () => import('./components/Foo.vue');

const routes = [
  { path: '/foo', component: Foo }
];

4. 数据懒加载（分页 / 无限滚动）

使用 IntersectionObserver 来实现当元素进入视口时加载更多内容。

const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) {
    loadMoreData(); // 自定义加载函数
  }
});

observer.observe(document.querySelector('#load-more-trigger'));