移动端图片加载/完成计数JS函数执行卡顿，求平滑优化方案

我之前做图片加载进度统计时，也碰到过一模一样的移动端问题——桌面端进度条能平滑走满，移动端却直接从0%跳至100%，或者中间只跳几个零散节点。后来排查下来，核心原因是移动端浏览器为了性能优化，在图片加载、事件触发上有和桌面端不一样的策略，比如批量触发load事件、缓存优先直接读取等。下面是几个亲测有效的解决思路：

1. 用XHR监听单图实时加载进度，替代原生img的load事件 #

原生<img>标签只有load和error事件，只有加载完成才会通知，没法拿到中间进度。而用XMLHttpRequest加载图片，可以监听progress事件获取实时的字节加载情况，这样能细粒度统计每一张图的加载进度，避免批量完成导致的跳变。

示例代码：

// 单图带进度加载的函数
function loadImageWithProgress(src) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', src, true);
    xhr.responseType = 'blob';

    // 实时监听加载进度
    xhr.onprogress = (e) => {
      if (e.lengthComputable) {
        // 计算当前单图的加载百分比
        const singlePercent = (e.loaded / e.total) * 100;
        // 把单图进度分摊到全局进度中（假设totalImages是总图片数）
        updateProgress(singlePercent);
      }
    };

    xhr.onload = () => {
      if (xhr.status === 200) {
        const img = new Image();
        img.src = URL.createObjectURL(xhr.response);
        img.onload = () => {
          URL.revokeObjectURL(img.src); // 释放blob资源
          updateProgress(100); // 确保该图进度拉满
          resolve(img);
        };
      } else {
        reject(new Error(`加载图片失败: ${src}`));
      }
    };

    xhr.onerror = reject;
    xhr.send();
  });
}

// 全局进度更新基础逻辑
let totalImages = 0;
let targetProgress = 0;
let currentProgress = 0;

function initProgress(total) {
  totalImages = total;
  targetProgress = 0;
  currentProgress = 0;
}

2. 处理缓存导致的瞬间加载问题 #

移动端浏览器的缓存策略非常激进，很多图片会直接从缓存读取，不会走完整的加载流程，这时候progress事件根本不会触发，直接跳100%。我们可以先判断图片是否在缓存中，对缓存图片直接标记为完成，非缓存图片用XHR加载。

示例代码：

// 判断图片是否在缓存中
async function isImageCached(src) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = src;
    // 缓存中的图片会在极短时间内触发onload
    const timeout = setTimeout(() => resolve(false), 100);
    img.onload = () => {
      clearTimeout(timeout);
      resolve(true);
    };
    img.onerror = () => {
      clearTimeout(timeout);
      resolve(false);
    };
  });
}

// 批量加载图片的入口
async function loadAllImages(imageUrls) {
  initProgress(imageUrls.length);
  for (const url of imageUrls) {
    const cached = await isImageCached(url);
    if (cached) {
      updateProgress(100);
      // 直接创建图片元素
      const img = new Image();
      img.src = url;
    } else {
      await loadImageWithProgress(url);
    }
  }
}

3. 用requestAnimationFrame平滑UI更新 #

即使拿到了细粒度的进度数据，频繁更新DOM也会在移动端造成性能问题，反而让进度看起来卡顿。用requestAnimationFrame把进度拆分成小步更新，视觉上会更平滑。

修改后的进度更新函数：

function updateProgress(singlePercent) {
  const increment = singlePercent / totalImages;
  targetProgress += increment;
  
  // 用requestAnimationFrame逐步逼近目标进度
  function animate() {
    if (currentProgress < targetProgress) {
      currentProgress += 0.5; // 每次增加0.5%，可根据需求调整速度
      document.getElementById('progress-bar').style.width = `${Math.min(currentProgress, 100)}%`;
      requestAnimationFrame(animate);
    } else {
      currentProgress = Math.min(targetProgress, 100);
      document.getElementById('progress-bar').style.width = `${currentProgress}%`;
    }
  }
  requestAnimationFrame(animate);
}

4. 注意跨域和兼容性问题 #

如果你的图片是跨域资源，必须确保服务器设置了Access-Control-Allow-Origin头，否则XHR无法获取图片的总字节数（e.lengthComputable会是false）。这时候可以给每张图片预设一个权重（比如按图片尺寸估算），或者用占位图先加载，再替换真实图片，保证进度条能平滑推进。

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