以下是一个使用HTML+CSS+JavaScript实现图片懒加载的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片懒加载示例</title>
<style>
.lazyload {
width: 100%;
min-height: 200px;
background: #f0f0f0;
transition: opacity 0.3s;
opacity: 0;
}
.lazyload.loaded {
opacity: 1;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.image-item {
margin-bottom: 400px; /* 增加滚动区域 */
}
</style>
</head>
<body>
<div>
<h1>滚动查看图片加载效果</h1>
<div>
<img data-src="https://picsum.photos/800/400?random=1" alt="示例图片1">
</div>
<div>
<img data-src="https://picsum.photos/800/400?random=2" alt="示例图片2">
</div>
<div>
<img data-src="https://picsum.photos/800/400?random=3" alt="示例图片3">
</div>
<div>
<img data-src="https://picsum.photos/800/400?random=4" alt="示例图片4">
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 获取所有需要懒加载的图片
const lazyloadImages = document.querySelectorAll('.lazyload');
// 配置Intersection Observer
const observerOptions = {
root: null, // 使用视口作为根
rootMargin: '0px 0px 100px 0px', // 提前100px触发加载
threshold: 0.1
};
// 观察回调函数
const observerCallback = (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); // 停止观察已加载的图片
}
});
};
// 创建观察器
const observer = new IntersectionObserver(observerCallback, observerOptions);
// 开始观察所有图片
lazyloadImages.forEach(img => {
observer.observe(img);
});
// 处理可能的初始化可见图片
window.addEventListener('load', () => {
lazyloadImages.forEach(img => {
if(img.getBoundingClientRect().top < window.innerHeight + 100) {
img.src = img.dataset.src;
img.classList.add('loaded');
observer.unobserve(img);
}
});
});
});
</script>
</body>
</html>使用data-src属性存储真实图片地址
添加lazyload类用于标识需要懒加载的图片
包含多个带占位符的图片容器
设置初始透明度为0，加载后渐显效果
添加*小高度防止布局抖动
设置灰色背景作为占位符
容器样式用于布局控制
使用Intersection Observer API检测元素可见性
配置提前100px触发加载（通过rootMargin实现）
图片进入视口时替换src属性
图片加载完成后添加loaded类触发渐显动画
加载完成后停止观察该图片
添加初始化检查确保首屏图片立即加载
实际使用时需要确保图片地址正确可用
可根据需要调整以下参数：
rootMargin：控制提前加载的距离
threshold：触发加载的可见比例
动画时长和效果
需要处理图片加载失败的情况（可添加onerror事件处理）
兼容性：需要为不支持Intersection Observer的浏览器提供polyfill
渐进式加载体验
滚动时自动加载
平滑的渐显动画
高性能的观察机制
首屏内容优先加载
你可以通过修改CSS中的transition属性值和添加更多图片来测试不同效果。实际部署时建议压缩代码并添加错误处理。
