不使用Promise解决Ajax异步加载3张图片顺序错乱问题

针对你需要加载3张连续全景切片但顺序无法保证的问题，有两种实用的非Promise方案：

方法1：串行回调链式调用 #

通过前一张加载完成后再发起下一张请求的方式，天然保证图片插入顺序，适合对加载顺序严格要求且不介意总耗时稍长的场景。

// 指定要加载的连续图片索引（示例为0、1、2）
const targetIndices = [0, 1, 2];
const container = document.getElementById('panorama-container');

// 封装单张图片加载函数，完成后调用回调
function loadSingleImage(index, nextCallback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `http://198.245.55.77/mars/camera.php?index=${index}`, true);
  xhr.responseType = 'blob'; // 以Blob形式接收图片数据

  xhr.onload = function() {
    if (xhr.status === 200) {
      const img = document.createElement('img');
      img.src = URL.createObjectURL(xhr.response);
      img.alt = `全景切片 ${index}`;
      container.appendChild(img); // 直接按请求顺序插入DOM
      nextCallback(); // 触发下一张图片的加载
    }
  };

  xhr.send();
}

// 链式执行加载流程
loadSingleImage(targetIndices[0], function() {
  loadSingleImage(targetIndices[1], function() {
    loadSingleImage(targetIndices[2], function() {
      console.log('3张全景切片加载完成');
    });
  });
});

方法2：并行请求+按顺序插入 #

同时发起所有请求，先将加载好的图片按索引暂存，等全部加载完成后按预设顺序插入DOM，这种方式总加载时间更短（接近单张图片的最长加载时间），效率更高。

const targetIndices = [0, 1, 2];
const container = document.getElementById('panorama-container');
const loadedImages = {}; // 按索引存储已加载的图片对象
let loadedCount = 0; // 记录已完成加载的图片数量

function loadSingleImage(index) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `http://198.245.55.77/mars/camera.php?index=${index}`, true);
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      const img = document.createElement('img');
      img.src = URL.createObjectURL(xhr.response);
      img.alt = `全景切片 ${index}`;
      loadedImages[index] = img; // 暂存图片
      loadedCount++;

      // 所有图片加载完成后，按顺序插入
      if (loadedCount === targetIndices.length) {
        targetIndices.forEach(index => {
          container.appendChild(loadedImages[index]);
        });
        console.log('3张全景切片加载完成');
      }
    }
  };

  xhr.send();
}

// 并行发起所有请求
targetIndices.forEach(index => loadSingleImage(index));

两种方案对比 #

• 串行回调：顺序绝对可靠，但总加载时间为三张图片加载时间之和，适合图片数量少的场景。
• 并行暂存：加载效率更高，最终插入顺序可控，适合需要同时加载多张图片的场景。

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