如何在图片后台预加载时实时更新ldBar的data-value

要让.ldBar.label-center的data-value随图片加载进度实时更新，直接在现有代码基础上做几个关键改动即可，以下是修改后的完整实现：

修改后的JavaScript #

// 初始化已加载图片计数
let loadedImages = 0;
// 获取进度条DOM元素
const progressBar = document.querySelector('.ldBar.label-center');

this.addEventListener("DOMContentLoaded", preloadImages, true);

// 替换为你的实际图片列表
const imageArray = ["bigImage.jpg", "image2.jpg", "image3.jpg"];

function preloadImages() {
  // 初始化进度为0
  progressBar.dataset.value = 0;
  // 触发ldBar组件更新初始状态
  if (progressBar.ldBar) {
    progressBar.ldBar.update(0);
  }

  for (let i = 0; i < imageArray.length; i++) {
    const tempImage = new Image();
    // 监听加载完成和失败事件，避免加载失败卡住进度
    tempImage.addEventListener("load", trackProgress);
    tempImage.addEventListener("error", trackProgress);
    tempImage.src = imageArray[i];
  }
}

function trackProgress() {
  loadedImages++;
  // 计算当前进度百分比
  const progress = Math.round((loadedImages / imageArray.length) * 100);
  // 更新data-value属性
  progressBar.dataset.value = progress;
  // 通知ldBar组件同步更新UI
  if (progressBar.ldBar) {
    progressBar.ldBar.update(progress);
  }

  // 所有图片加载完成后的逻辑
  if (loadedImages === imageArray.length) {
    imagesLoaded();
  }
}

function imagesLoaded() {
  // 加载完成后可执行的操作，比如隐藏进度条、跳转页面等
  console.log('所有图片加载完成');
  setTimeout(() => {
    progressBar.style.display = 'none';
  }, 3000);
}

调整后的HTML #

<!-- 初始进度设为0，符合加载起始状态 -->
<div class="ldBar label-center" data-value="0" data-type="fill" data-img="media/886679_9d816.gif" data-img-size="400,400" data-fill-background="#9df"></div>

关键改动说明 #

• 变量初始化：新增loadedImages初始值，避免未定义报错；提前获取进度条DOM元素，减少重复查询开销。
• 进度同步逻辑：每次图片加载（或失败）后，计算当前进度百分比，直接修改元素的dataset.value，同时调用ldBar的update方法确保UI实时刷新。
• 容错处理：添加error事件监听，就算图片加载失败也会计入进度，防止用户一直卡在加载状态。
• 初始状态优化：把HTML初始data-value改为0，更符合加载开始时的真实状态。

内容的提问来源于stack exchange，提问作者Henrik Ruud