延迟加载是一种推迟加载资源的技术，使其仅在需要使用时加载，从而提高页面加载速度和初始性能。使用JavaScript进行延迟加载涉及四个步骤：(1)创建图像占位符；(2)监听滚动事件；(3)判断图像是否可见；(4)加载图像，并用实际图像替换占位符。延迟加载的优势包括提高页面加载速度、减少初始加载带宽和改善用户体验。
JavaScript 中延迟加载
什么是延迟加载？
延迟加载是一种优化技术，它将资源的加载推迟到需要使用的时候才进行。这有助于提高页面的加载速度和初始性能。
如何使用 JavaScript 进行延迟加载？
使用 JavaScript 延迟加载图像或其他资源，可以通过以下步骤实现：
- 创建图像占位符：使用一个不可见的图像或占位符来代替实际图像。
- 监听滚动事件：在页面滚动时，监听滚动事件。
-
判断图像是否可见：使用
getBoundingClientRect()方法获取图像元素相对于视口的距离，如果距离小于视口的尺寸，则表示图像已进入可视区域。 -
加载图像：如果图像已进入可视区域，则使用 AJAX 或
fetch()API 加载实际图像，并替换占位符。
示例代码：
// 1. 创建图像占位符
const placeholder = document.querySelector('.placeholder');
// 2. 监听滚动事件
window.addEventListener('scroll', () => {
// 3. 判断图像是否可见
const rect = placeholder.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
// 4. 加载图像
const image = new Image();
image.onload = () => {
placeholder.src = image.src;
};
image.src = 'path/to/actual_image.jpg';
}
});优势
延迟加载具有以下优势：
- 提高页面加载速度
- 减少初始加载时所需的带宽
- 改善用户体验，尤其是对于移动设备和互联网速度较慢的区域
