```
这里，`src`属性被设置为一个占位图（placeholder），而真实的图片URL则被放在`data-src`属性中。图片同时被赋予了一个`lazy`类名，以便于后续通过JavaScript选择这些图片。
#### 2. 编写JavaScript代码实现懒加载
接下来，我们将编写JavaScript代码来监听滚动事件，并检查每个被标记为懒加载的图片是否已经进入视口。如果是，则将其`src`属性的值更改为`data-src`属性的值，从而触发图片的加载。
```javascript
document.addEventListener('DOMContentLoaded', function() {
// 获取所有需要懒加载的图片
var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
// 定义一个函数用于检查图片是否在视口中
function checkInView() {
lazyImages.forEach(function(img) {
if (img.offsetTop < (window.innerHeight + window.scrollY)) {
img.src = img.getAttribute('data-src');
img.classList.remove('lazy'); // 可选：移除懒加载类名，避免重复加载
// 可选：从lazyImages数组中移除已加载的图片，以提高性能
}
});
}
// 初始检查（针对已处于视口内的图片）
checkInView();
// 监听滚动事件
window.addEventListener('scroll', function() {
checkInView();
});
// 可选：监听窗口大小变化事件
window.addEventListener('resize', function() {
checkInView();
});
});
```
#### 3. 优化性能
上述代码虽然实现了懒加载的基本功能，但在滚动或窗口大小变化时频繁调用`checkInView`函数可能会导致性能问题。为了优化，我们可以采用以下策略：
- **防抖（Debouncing）与节流（Throttling）**：这些技术可以限制`checkInView`函数的执行频率，从而避免不必要的计算。
- **Intersection Observer API**：这是一个现代的Web API，专门用于异步检测目标元素与其祖先元素或顶级文档视口的交叉状态。使用此API可以大大简化懒加载的实现，并显著提高性能。
### 三、使用Intersection Observer API优化懒加载
`Intersection Observer API`提供了一种异步检测目标元素与祖先元素或视口交叉状态的方法。它比监听滚动事件更高效，因为它是由浏览器在内部优化处理的。
#### 示例代码
```javascript
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = document.querySelectorAll('img.lazy');
if ('IntersectionObserver' in window) {
var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var img = entry.target;
img.src = img.getAttribute('data-src');
img.classList.remove('lazy');
lazyImageObserver.unobserve(img); // 停止观察已加载的图片
}
});
});
lazyImages.forEach(function(img) {
lazyImageObserver.observe(img);
});
} else {
// 浏览器不支持Intersection Observer API时，回退到旧方法
}
});
```
### 四、在“码小课”网站中的应用
在“码小课”网站中，懒加载技术可以极大地提升页面加载速度和用户体验。特别是在课程详情页、项目展示页等包含大量图片资源的页面，应用懒加载可以显著减少用户的等待时间。
- **课程详情页**：在介绍课程内容时，通常会包含多张课程截图或示例图片。使用懒加载可以确保用户首先看到的是课程的核心信息，而图片则在滚动到对应位置时逐步加载。
- **项目展示页**：在展示学生或团队的项目作品时，每个项目都可能包含多张高清图片。通过懒加载，这些图片只在用户感兴趣并滚动到它们的位置时才开始加载，从而避免了不必要的带宽消耗和加载时间。
### 五、总结
懒加载是一种简单而有效的技术，可以帮助我们优化网页的加载速度和用户体验。通过结合使用现代Web API（如Intersection Observer）和传统的JavaScript技术，我们可以灵活地实现懒加载功能，并将其应用于各种实际场景中。在“码小课”网站中，合理利用懒加载技术将为用户带来更加流畅和愉悦的浏览体验。 当前位置： 技术文章>> 如何用 JavaScript 实现懒加载（lazy loading）？
文章标题：如何用 JavaScript 实现懒加载（lazy loading）？
在Web开发中，懒加载（Lazy Loading）是一种优化网页加载速度和提高用户体验的技术。通过懒加载，页面上的资源（如图片、视频、脚本等）仅在它们即将进入可视区域时才开始加载。这种方式可以显著减少页面初始加载时间，特别是对于包含大量图片或媒体文件的网页。接下来，我将详细探讨如何使用JavaScript实现图片懒加载，并在过程中自然地融入对“码小课”网站的提及，以展示其在实践中的应用。
### 一、懒加载的基本原理
懒加载的核心思想在于延迟非关键资源的加载。对于图片而言，这意味着只有当图片即将出现在浏览器视口（viewport）内时，才开始下载图片资源。这可以通过监听滚动事件、计算图片位置与视口的关系来实现。
### 二、实现步骤
#### 1. 标记需要懒加载的图片
首先，我们需要一种方式来标记哪些图片应该被懒加载。常见的做法是给这些图片添加一个特定的类名或数据属性（data-*）。
```html
```
这里，`src`属性被设置为一个占位图（placeholder），而真实的图片URL则被放在`data-src`属性中。图片同时被赋予了一个`lazy`类名，以便于后续通过JavaScript选择这些图片。
#### 2. 编写JavaScript代码实现懒加载
接下来，我们将编写JavaScript代码来监听滚动事件，并检查每个被标记为懒加载的图片是否已经进入视口。如果是，则将其`src`属性的值更改为`data-src`属性的值，从而触发图片的加载。
```javascript
document.addEventListener('DOMContentLoaded', function() {
// 获取所有需要懒加载的图片
var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
// 定义一个函数用于检查图片是否在视口中
function checkInView() {
lazyImages.forEach(function(img) {
if (img.offsetTop < (window.innerHeight + window.scrollY)) {
img.src = img.getAttribute('data-src');
img.classList.remove('lazy'); // 可选：移除懒加载类名，避免重复加载
// 可选：从lazyImages数组中移除已加载的图片，以提高性能
}
});
}
// 初始检查（针对已处于视口内的图片）
checkInView();
// 监听滚动事件
window.addEventListener('scroll', function() {
checkInView();
});
// 可选：监听窗口大小变化事件
window.addEventListener('resize', function() {
checkInView();
});
});
```
#### 3. 优化性能
上述代码虽然实现了懒加载的基本功能，但在滚动或窗口大小变化时频繁调用`checkInView`函数可能会导致性能问题。为了优化，我们可以采用以下策略：
- **防抖（Debouncing）与节流（Throttling）**：这些技术可以限制`checkInView`函数的执行频率，从而避免不必要的计算。
- **Intersection Observer API**：这是一个现代的Web API，专门用于异步检测目标元素与其祖先元素或顶级文档视口的交叉状态。使用此API可以大大简化懒加载的实现，并显著提高性能。
### 三、使用Intersection Observer API优化懒加载
`Intersection Observer API`提供了一种异步检测目标元素与祖先元素或视口交叉状态的方法。它比监听滚动事件更高效，因为它是由浏览器在内部优化处理的。
#### 示例代码
```javascript
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = document.querySelectorAll('img.lazy');
if ('IntersectionObserver' in window) {
var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var img = entry.target;
img.src = img.getAttribute('data-src');
img.classList.remove('lazy');
lazyImageObserver.unobserve(img); // 停止观察已加载的图片
}
});
});
lazyImages.forEach(function(img) {
lazyImageObserver.observe(img);
});
} else {
// 浏览器不支持Intersection Observer API时，回退到旧方法
}
});
```
### 四、在“码小课”网站中的应用
在“码小课”网站中，懒加载技术可以极大地提升页面加载速度和用户体验。特别是在课程详情页、项目展示页等包含大量图片资源的页面，应用懒加载可以显著减少用户的等待时间。
- **课程详情页**：在介绍课程内容时，通常会包含多张课程截图或示例图片。使用懒加载可以确保用户首先看到的是课程的核心信息，而图片则在滚动到对应位置时逐步加载。
- **项目展示页**：在展示学生或团队的项目作品时，每个项目都可能包含多张高清图片。通过懒加载，这些图片只在用户感兴趣并滚动到它们的位置时才开始加载，从而避免了不必要的带宽消耗和加载时间。
### 五、总结
懒加载是一种简单而有效的技术，可以帮助我们优化网页的加载速度和用户体验。通过结合使用现代Web API（如Intersection Observer）和传统的JavaScript技术，我们可以灵活地实现懒加载功能，并将其应用于各种实际场景中。在“码小课”网站中，合理利用懒加载技术将为用户带来更加流畅和愉悦的浏览体验。
```
这里，`src`属性被设置为一个占位图（placeholder），而真实的图片URL则被放在`data-src`属性中。图片同时被赋予了一个`lazy`类名，以便于后续通过JavaScript选择这些图片。
#### 2. 编写JavaScript代码实现懒加载
接下来，我们将编写JavaScript代码来监听滚动事件，并检查每个被标记为懒加载的图片是否已经进入视口。如果是，则将其`src`属性的值更改为`data-src`属性的值，从而触发图片的加载。
```javascript
document.addEventListener('DOMContentLoaded', function() {
// 获取所有需要懒加载的图片
var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
// 定义一个函数用于检查图片是否在视口中
function checkInView() {
lazyImages.forEach(function(img) {
if (img.offsetTop < (window.innerHeight + window.scrollY)) {
img.src = img.getAttribute('data-src');
img.classList.remove('lazy'); // 可选：移除懒加载类名，避免重复加载
// 可选：从lazyImages数组中移除已加载的图片，以提高性能
}
});
}
// 初始检查（针对已处于视口内的图片）
checkInView();
// 监听滚动事件
window.addEventListener('scroll', function() {
checkInView();
});
// 可选：监听窗口大小变化事件
window.addEventListener('resize', function() {
checkInView();
});
});
```
#### 3. 优化性能
上述代码虽然实现了懒加载的基本功能，但在滚动或窗口大小变化时频繁调用`checkInView`函数可能会导致性能问题。为了优化，我们可以采用以下策略：
- **防抖（Debouncing）与节流（Throttling）**：这些技术可以限制`checkInView`函数的执行频率，从而避免不必要的计算。
- **Intersection Observer API**：这是一个现代的Web API，专门用于异步检测目标元素与其祖先元素或顶级文档视口的交叉状态。使用此API可以大大简化懒加载的实现，并显著提高性能。
### 三、使用Intersection Observer API优化懒加载
`Intersection Observer API`提供了一种异步检测目标元素与祖先元素或视口交叉状态的方法。它比监听滚动事件更高效，因为它是由浏览器在内部优化处理的。
#### 示例代码
```javascript
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = document.querySelectorAll('img.lazy');
if ('IntersectionObserver' in window) {
var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var img = entry.target;
img.src = img.getAttribute('data-src');
img.classList.remove('lazy');
lazyImageObserver.unobserve(img); // 停止观察已加载的图片
}
});
});
lazyImages.forEach(function(img) {
lazyImageObserver.observe(img);
});
} else {
// 浏览器不支持Intersection Observer API时，回退到旧方法
}
});
```
### 四、在“码小课”网站中的应用
在“码小课”网站中，懒加载技术可以极大地提升页面加载速度和用户体验。特别是在课程详情页、项目展示页等包含大量图片资源的页面，应用懒加载可以显著减少用户的等待时间。
- **课程详情页**：在介绍课程内容时，通常会包含多张课程截图或示例图片。使用懒加载可以确保用户首先看到的是课程的核心信息，而图片则在滚动到对应位置时逐步加载。
- **项目展示页**：在展示学生或团队的项目作品时，每个项目都可能包含多张高清图片。通过懒加载，这些图片只在用户感兴趣并滚动到它们的位置时才开始加载，从而避免了不必要的带宽消耗和加载时间。
### 五、总结
懒加载是一种简单而有效的技术，可以帮助我们优化网页的加载速度和用户体验。通过结合使用现代Web API（如Intersection Observer）和传统的JavaScript技术，我们可以灵活地实现懒加载功能，并将其应用于各种实际场景中。在“码小课”网站中，合理利用懒加载技术将为用户带来更加流畅和愉悦的浏览体验。