首页 > 文章 > 前端

HTML图片加载进度条实现技巧

时间：2025-10-08 11:00:50 191浏览收藏

哈喽！今天心血来潮给大家带来了《HTML图片加载进度条实现方法》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

实现图片加载进度条的核心思路是通过JavaScript监听加载事件并结合CSS视觉反馈。1. 单张图片常用CSS动画模拟进度条，在load事件触发后隐藏；2. 多张图片可通过计数已加载数量计算完成百分比，实时更新进度；3. 使用XMLHttpRequest结合onprogress事件可获取真实下载进度，适用于大图或AJAX加载场景；4. 第三方库如Lozad.js等可简化实现，提升体验。根据需求选择合适方案即可。

HTML图片加载进度条怎么实现_HTML图片加载进度条实现

实现HTML图片加载进度条的核心思路是：在图片完全加载前显示一个进度提示，让用户知道资源正在加载。由于浏览器原生不提供图片加载的实时进度（特别是单张静态图片），我们通常通过JavaScript监听图片的load事件，并结合一些视觉反馈来模拟“进度条”效果。以下是几种实用的实现方式。

1. 使用JavaScript监听load事件 + CSS进度条

这是最基础也最常用的方法。虽然不能精确获取图片下载的字节进度（除非后端支持），但可以通过CSS动画先展示一个假进度条，等图片加载完成后再隐藏。

示例代码：

<div class="image-container">
  <img src="your-image.jpg" alt="图片" id="loadingImage" style="display:none;" />
  <div class="progress-bar"><div class="progress"></div></div>
</div>
<p><script>
const img = document.getElementById('loadingImage');
const progressBar = document.querySelector('.progress');</p><p>// 开始加载时启动进度动画
img.onload = function() {
// 图片加载完成，隐藏进度条，显示图片
document.querySelector('.progress-bar').style.display = 'none';
img.style.display = 'block';
};</p><p>// 触发加载
img.src = img.src; // 如果已缓存，可能立即触发onload
</script></p><p><style>
.image-container {
position: relative;
width: 300px;
}
.progress-bar {
width: 100%;
height: 6px;
background: #f0f0f0;
border-radius: 3px;
overflow: hidden;
}
.progress {
height: 100%;
width: 100%;
background: #007bff;
animation: loading 1.5s infinite linear;
}
@keyframes loading {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
</style></p>

说明：这个方法用CSS动画模拟进度流动，当onload触发时停止动画并显示图片。适用于大多数静态图片场景。

2. 预加载多张图片并显示整体进度

如果你需要加载多张图片并显示统一的加载进度，可以用计数方式计算完成百分比。

<div class="multi-loader">
  <div class="progress-text">加载中... <span id="percent">0%</span></div>
  <div class="progress-bar"><div id="multiProgress"></div></div>
</div>
<p><script>
const imageUrls = [
'img1.jpg',
'img2.jpg',
'img3.jpg'
];
let loadedCount = 0;</p><p>imageUrls.forEach(src => {
const img = new Image();
img.onload = img.onerror = () => {
loadedCount++;
const percent = Math.round((loadedCount / imageUrls.length) * 100);
document.getElementById('percent').textContent = percent + '%';
document.getElementById('multiProgress').style.width = percent + '%';</p><pre class="brush:php;toolbar:false;">if (loadedCount === imageUrls.length) {
  setTimeout(() =&gt; {
    document.querySelector('.multi-loader').style.display = 'none';
    // 所有图片已加载，可执行后续操作
  }, 500);
}

}; img.src = src; });

这种方式适合图集、相册或游戏资源预加载场景，能真实反映加载完成比例。

3. 结合服务端返回的进度（高级）

如果图片是通过AJAX请求（如Blob或ArrayBuffer）加载的，可以利用XMLHttpRequest的progress事件获取真实下载进度。

示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'large-image.jpg', true);
xhr.responseType = 'blob';
<p>xhr.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
document.querySelector('.progress').style.width = percent + '%';
}
};</p><p>xhr.onload = function() {
const url = URL.createObjectURL(this.response);
const img = document.getElementById('dynamicImg');
img.src = url;
img.style.display = 'block';
document.querySelector('.progress-bar').style.display = 'none';
};</p><p>xhr.send();</p>

注意：这种方法要求图片路径允许跨域访问，并且使用AJAX加载，适合大图或需要精细控制的场景。

4. 使用第三方库简化实现

像 Lozad.js、LazySizes 或 PhotoSwipe 这类库内置了加载状态管理，配合CSS可快速实现优雅的加载效果。

例如使用纯CSS实现淡入效果：

.fade-in-img {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fade-in-img.loaded {
  opacity: 1;
}

然后在onload中添加loaded类即可。

基本上就这些常见方式。选择哪种取决于你的具体需求：单图可用CSS动画模拟，多图可用计数进度，大图可考虑XHR真实进度。实现时不复杂，但容易忽略错误处理（如onerror）。

到这里，我们也就讲完了《HTML图片加载进度条实现技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS,JavaScript,XMLHttpRequest,load事件,图片加载进度条的知识点！

CSS JavaScript XMLHttpRequest load事件图片加载进度条