项目背景
随着网速的提升和移动设备的普及，越来越多的网站开始使用大量的图片来提高网站的视觉效果。然而，过多的图片会导致网页加载速度变慢，影响用户体验。因此，图片懒加载成为了一种流行的优化方式，即只加载当前可见的图片，当用户滚动到不可见的图片时再加载。
项目目标
实现一个图片懒加载的JavaScript库，可以用于任何需要加载图片的场景。
项目实现
1. 项目结构
首先，我们需要创建一个项目文件夹，并在其中包含以下文件：
index.html：网页的入口文件script.js：JavaScript库的主文件style.css：样式表
其中，index.html文件中包含以下代码：
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片懒加载</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
<img src="image4.jpg" alt="图片4">
<img src="image5.jpg" alt="图片5">
</div>
<script src="script.js"></script>
</body>
</html>
其中，container是一个包含所有图片的容器，img元素是需要懒加载的图片。script.js文件中包含以下代码：
javascript
Copy code
class ImageLoader {
constructor(container) {
this.container = container;
this.images = Array.from(container.querySelectorAll('img'));
this.loadedImages = new Set();
}
loadImages() {
this.images.forEach(image => {
if (!this.loadedImages.has(image)) {
this.loadImage(image);
}
});
}
loadImage(image) {
const src = image.getAttribute('src');
const loadingImage = document.createElement('img');
loadingImage.src = src;
loadingImage.classList.add('loading-image');
this.container.appendChild(loadingImage);
loadingImage.addEventListener('load', () => {
this.loadedImages.add(image);
this.container.removeChild(loadingImage);
});
}
}
const imageLoader = new ImageLoader(document.querySelector('.container'));
imageLoader.loadImages();
其中，ImageLoader类是图片懒加载的核心，包含以下功能：
- 初始化：创建一个
ImageLoader实例，传入需要懒加载的图片容器。 - 加载图片：遍历所有未加载的图片，调用
loadImage方法加载图片。 - 加载图片：创建一个
img元素作为加载中的图片，并添加到容器中。 - 图片加载完成：当图片加载完成时，将加载中的图片从容器中移除，并将该图片标记为已加载。
2. 项目优化
为了提高图片懒加载的性能，我们可以对代码进行以下优化：
- 使用
forEach方法遍历图片数组，而不是使用for循环。 - 使用
new Set()创建一个集合来存储已加载的图片，而不是使用一个数组。 - 在加载图片时，使用一个
img元素作为加载中的图片，而不是使用一个div元素。
项目总结
通过以上实例，我们可以看到如何使用JavaScript实现图片懒加载，并对代码进行优化。在实际应用中，我们可以根据不同的需求对代码进行修改和扩展，以满足更多的场景需求。
