图片延迟加载
图片延迟加载是一种通过延迟图像的加载时间来提高网页性能的优化技术。这种技术在许多场景中都非常有用，例如在滚动页面时，仅加载可视区域内的图像，从而减少页面加载时间和带宽消耗。
实现图片延迟加载的方法有很多种，其中最常见的是使用JavaScript和CSS。下面是一个简单的图片延迟加载示例：
1. 首先，在HTML文件中的`
![]()
`标签中添加一个`data-src`属性，用于指定图片的延迟加载源。同时，删除原始的`src`属性。
```html
![Your Image]()
```
2. 然后，在JavaScript文件中编写一个函数，用于在页面加载完成后加载图片。这个函数会在滚动页面到可视区域时触发。
```javascript
function loadImage() {
const images = document.querySelectorAll('img[data-src]');
for (const img of images) {
const src = img.getAttribute('data-src');
if (src) {
img.src = src;
img.removeAttribute('data-src');
}
}
}
window.addEventListener('scroll', loadImage);
loadImage();
```
在这个示例中，我们首先定义了一个名为`loadImage`的函数，该函数会遍历页面上的所有`
![]()
`元素，并检查它们是否具有`data-src`属性。如果存在`data-src`属性，说明该图片是延迟加载的，我们将替换原来的`src`属性，然后删除`data-src`属性。最后，我们在页面加载完成后调用`loadImage`函数，以触发图片加载。
此外，还可以使用CSS的`background-image`和`background-position`属性来实现类似的效果。这种方法不需要JavaScript，但需要设置合适的`background-position`属性，以确保只加载可视区域内的图像。
```html
```
```css
.lazy-image-container {
overflow: hidden;
position: relative;
}
.lazy-image {
width: 100%;
height: auto;
background-image: url('path/to/your/image.jpg');
background-position: center;
background-repeat: no-repeat;
}
```
在这个示例中，我们使用了一个名为`.lazy-image-container`的容器元素来包裹`
![]()
`元素。我们为这个容器元素添加了`overflow: hidden`和`position: relative`样式，以确保图片不会超出容器的范围。然后，我们为`
![]()
`元素添加了一个名为`.lazy-image`的类，并设置了`background-image`和`background-position`属性。当页面加载完成后，`.lazy-image`类的`background-image`属性会被设置为`path/to/your/image.jpg`，从而加载图片。由于`background-position`属性的作用，图片只会加载到可视区域的位置。
```
2. 然后，在JavaScript文件中编写一个函数，用于在页面加载完成后加载图片。这个函数会在滚动页面到可视区域时触发。
```javascript
function loadImage() {
const images = document.querySelectorAll('img[data-src]');
for (const img of images) {
const src = img.getAttribute('data-src');
if (src) {
img.src = src;
img.removeAttribute('data-src');
}
}
}
window.addEventListener('scroll', loadImage);
loadImage();
```
在这个示例中，我们首先定义了一个名为`loadImage`的函数，该函数会遍历页面上的所有`