<div class="image-container">
  @@##@@
  <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>

<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(() => {
    document.querySelector('.multi-loader').style.display = 'none';
    // 所有图片已加载，可执行后续操作
  }, 500);
}

}; img.src = src; });

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>

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