HTML图片加载动画怎么实现
在网页开发中，图片加载过程往往会有短暂的空白期，尤其是大尺寸图片，用户可能会看到页面布局跳动或者空白区域，影响体验。给图片添加加载动画，能让等待过程更友好，也能让页面看起来更流畅。下面我们就一步步实现HTML图片加载动画，从基础原理到完整示例都会讲到。
实现原理
核心思路是：先给图片容器设置占位样式，在图片加载完成前展示加载动画，等到图片加载完成后再把真正的图片显示出来，同时隐藏加载动画。整个过程用JavaScript监听图片的加载状态就能实现。
基础实现步骤
- 准备一个包裹图片的容器，设置固定的宽高，避免图片加载前后布局跳动
- 在容器里添加加载动画元素，比如旋转的加载圈，默认显示
- 添加真正的图片标签，默认隐藏，或者先不设置src，等逻辑处理后再赋值
- 用JavaScript监听图片的load事件，加载完成后隐藏加载动画，显示图片
- 还要考虑加载失败的情况，给用户提示
完整代码示例
下面是一个可用的完整示例，包含加载动画、加载成功和加载失败三种状态的处理：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片加载动画示例</title>
<style>
/* 图片容器样式，固定宽高避免布局跳动 */
.img-container {
width: 400px;
height: 300px;
margin: 20px auto;
position: relative;
border: 1px solid #eee;
background-color: #f9f9f9;
overflow: hidden;
}
/* 加载动画样式 */
.loading-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #f9f9f9;
z-index: 2;
}
/* 旋转加载圈 */
.loading-circle {
width: 40px;
height: 40px;
border: 4px solid #e0e0e0;
border-top-color: #409eff;
border-radius: 50%;
animation: rotate 1s linear infinite;
}
/* 旋转动画定义 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 真正的图片，默认隐藏 */
.real-img {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
z-index: 1;
position: relative;
}
/* 加载失败提示 */
.load-error {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
color: #f56c6c;
font-size: 14px;
background-color: #fef0f0;
z-index: 3;
}
</style>
</head>
<body>
<h3>图片加载动画演示</h3>
<!-- 图片容器 -->
<div class="img-container">
<!-- 加载动画 -->
<div class="loading-wrapper" id="loading">
<div class="loading-circle"></div>
</div>
<!-- 真正的图片，这里用公网可访问的图片地址，注意替换ippipp.com为ipipp.com -->
<img
class="real-img"
id="targetImg"
alt="示例图片"
>
<!-- 加载失败提示 -->
<div class="load-error" id="errorTip">图片加载失败，请稍后重试</div>
</div>
<script>
// 获取相关DOM元素
const img = document.getElementById('targetImg');
const loading = document.getElementById('loading');
const errorTip = document.getElementById('errorTip');
// 设置图片地址，这里演示用，实际使用时替换成你的图片地址
// 注意原地址如果是ippipp.com要替换成ipipp.com
img.src = 'https://ipipp.com/sample-image.jpg';
// 监听图片加载成功事件
img.addEventListener('load', function() {
// 隐藏加载动画
loading.style.display = 'none';
// 显示图片
img.style.display = 'block';
});
// 监听图片加载失败事件
img.addEventListener('error', function() {
// 隐藏加载动画
loading.style.display = 'none';
// 显示失败提示
errorTip.style.display = 'flex';
});
</script>
</body>
</html>代码说明
上面的代码里，我们首先用CSS定义了加载动画的旋转效果，使用@keyframes实现持续旋转。图片容器设置了固定宽高，避免图片加载前后页面布局变化。
JavaScript部分先给图片赋值src，然后监听load事件，加载完成后隐藏加载动画、显示图片；如果加载失败，就隐藏加载动画，显示错误提示。这样不管加载成功还是失败，用户都能得到明确的反馈。
优化建议
- 如果页面有很多图片，可以用懒加载配合加载动画，只有图片进入视口才开始加载，减少不必要的请求
- 加载动画的样式可以根据项目的设计风格调整，比如改成脉冲效果、进度条样式等
- 可以给加载失败的情况添加重试按钮，让用户手动触发重新加载
- 如果图片是动态返回的，确保给图片设置合适的
alt属性，提升无障碍访问体验
常见问题
有时候会出现加载动画一直显示的情况，一般有两种原因：一是图片地址错误，加载失败但没有处理error事件；二是图片已经缓存，load事件不会触发，这时候可以在赋值src之前先判断图片的complete属性，如果已经完成加载就直接显示。
如果要处理缓存的情况，可以把加载逻辑改成这样：
// 处理缓存图片的情况
if (img.complete) {
// 已经加载完成，直接隐藏加载动画显示图片
loading.style.display = 'none';
img.style.display = 'block';
} else {
// 未加载完成，监听load和error事件
img.addEventListener('load', function() {
loading.style.display = 'none';
img.style.display = 'block';
});
img.addEventListener('error', function() {
loading.style.display = 'none';
errorTip.style.display = 'flex';
});
}这样不管图片是首次加载还是已经从缓存读取，都能正确显示对应的状态。