js一个图片分区加载
时间: 2024-01-09 11:11:12 浏览: 30
图片分区加载可以提高网页的性能,可以通过以下步骤实现:
1. 将图片分成多个区域,每个区域可以是一个独立的图片或者是一个图片的一部分。
2. 在页面加载时,只加载页面可见区域的图片,其他区域的图片不加载。
3. 随着用户滚动页面,根据当前可见区域加载相应的图片区域。
4. 可以使用 JavaScript 监听用户滚动事件,并根据用户滚动的位置计算出当前可见的图片区域。
以下是一个简单的实现例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lazy Load Images</title>
<style>
.image-container {
width: 800px;
height: 600px;
overflow: auto;
}
.image {
width: 400px;
height: 300px;
background-color: #ccc;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="image-container">
<div class="image" data-src="image-1.jpg"></div>
<div class="image" data-src="image-2.jpg"></div>
<div class="image" data-src="image-3.jpg"></div>
<div class="image" data-src="image-4.jpg"></div>
<div class="image" data-src="image-5.jpg"></div>
<div class="image" data-src="image-6.jpg"></div>
</div>
<script>
function lazyLoadImages() {
const images = document.querySelectorAll('.image');
images.forEach((image) => {
const rect = image.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom >= 0) {
const src = image.getAttribute('data-src');
if (src) {
image.style.backgroundImage = `url(${src})`;
image.removeAttribute('data-src');
}
}
});
}
lazyLoadImages();
window.addEventListener('scroll', lazyLoadImages);
</script>
</body>
</html>
```
在这个例子中,我们将图片分成了多个区域,每个区域都是一个 `div` 元素,并且设置了一个 `data-src` 属性来保存图片的 URL。在页面加载时,只加载可见区域的图片,其他区域的图片会在用户滚动页面时加载。我们使用了 `getBoundingClientRect()` 方法来获取每个图片区域的位置信息,并判断是否在可见区域内。如果在可见区域内,就加载图片,并将 `data-src` 属性移除,防止重复加载。`window.addEventListener('scroll', lazyLoadImages)` 用于监听用户滚动事件,当用户滚动页面时,调用 `lazyLoadImages()` 函数来加载相应的图片区域。