JavaScript延迟加载（Lazy Loading）是一种优化网页性能的技术，它的核心思想是只在用户需要时才加载资源，而不是一次性加载所有内容。这可以显著减少页面的初始加载时间，提高用户体验，特别是对于那些内容丰富的网站和应用。
延迟加载通常应用于图片、视频、脚本和其他大体积的非关键内容。在JavaScript中，我们可以利用各种策略来实现这一目标，如Intersection Observer API、事件监听和滚动检测等。
1. **Intersection Observer API**：
这是现代浏览器提供的一种原生API，用于检测元素是否进入或离开视口。我们创建一个观察者实例，设置阈值和回调函数，当观察到的元素进入视口时，触发回调，此时加载相关资源。例如，我们可以监听图片元素，只有当它们进入视口时才开始加载。
2. **事件监听**：
对于某些交互式元素，如按钮或链接，我们可以在用户点击时才加载相应的资源。通过为这些元素添加事件监听器，当用户触发特定事件时，异步加载相关JavaScript或图片。
3. **滚动检测（Scrolling Detection）**：
可以通过监听滚动事件，当用户滚动到特定位置时，判断相关元素是否在视口中，如果在则加载资源。这种方法虽然简单，但在大量滚动时可能会导致性能问题，因为它会产生大量的滚动事件。
4. **预加载（Preloading）**：
预加载是在延迟加载策略中的一种补充手段，可以用于加载预计用户可能需要但当前未在视口中的资源。这可以通过`<link rel="preload">`标签或者JavaScript实现，预先获取资源，减少用户实际需要时的等待时间。
5. **路由感知延迟加载**：
在单页应用（SPA）中，可以根据路由变化来延迟加载模块。当用户导航到新路由时，只加载该路由所需的相关脚本和数据，而不是整个应用。
6. **懒加载库**：
社区中存在许多成熟的JavaScript库，如lozad.js、lazysizes等，它们提供了易于使用的API和配置选项，帮助开发者快速实现延迟加载功能。
7. **图片格式选择**：
延迟加载同时也可以结合WebP或AVIF等高效图片格式，进一步减少加载时间。这些格式在压缩率上优于传统的JPEG和PNG，能够在不降低质量的前提下减小文件大小。
8. **服务端渲染（Server-Side Rendering, SSR）与客户端渲染（Client-Side Rendering, CSR）**：
延迟加载可以与SSR和CSR结合，例如，在服务器端渲染初始内容，然后在客户端通过延迟加载处理更多的动态内容。
JavaScript延迟加载是提升网站性能的重要技术，它能够平衡用户体验与网络带宽的使用，特别是在移动设备和有限网络环境下，其优势更为明显。通过合理地选择和实施延迟加载策略，开发者可以构建更加流畅、高效的Web应用。
js.rar （1个子文件） 
js 
loadImg.min.js 3KB
