在JavaScript中实现图片的隐藏加载,通常涉及到几个基础概念和技术:
以下是使用Intersection Observer API实现图片懒加载的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Lazy Loading</title>
<style>
img {
width: 100%;
height: auto;
display: block;
margin-bottom: 20px;
}
.lazy-load {
opacity: 0;
transition: opacity 0.5s;
}
.lazy-load.loaded {
opacity: 1;
}
</style>
</head>
<body>
<img class="lazy-load" data-src="path/to/image1.jpg" alt="Image 1">
<img class="lazy-load" data-src="path/to/image2.jpg" alt="Image 2">
<img class="lazy-load" data-src="path/to/image3.jpg" alt="Image 3">
<!-- 更多图片 -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll('.lazy-load');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.onload = () => img.classList.add('loaded');
observer.unobserve(img);
}
});
}, {
rootMargin: '0px',
threshold: 0.1
});
images.forEach(img => {
observer.observe(img);
});
});
</script>
</body>
</html>
data-src
属性,用于存储实际的图片路径,初始src
属性为空。IntersectionObserver
监听图片是否进入可视区域。data-src
的值赋给src
,并添加loaded
类以显示图片。通过以上方法,可以实现高效的图片懒加载,提升网页性能和用户体验。
领取专属 10元无门槛券
手把手带您无忧上云