图片加载中使用Callback实现顺序执行失败，寻求技术协助

云原生阿岚

2026-5-9

解决回调控制异步代码执行顺序的问题

嘿，我来帮你搞定这个顺序问题！你遇到的核心问题是图片加载是异步操作，浏览器不会等着图片加载完再继续执行后面的代码，这才导致了输出顺序和预期不符。

咱们先拆解下原代码的执行流程：

调用processImage，先打印Start
执行callback(loadImage)，进入loadImage打印Load Method
设置img.src后，浏览器后台开始加载图片，主线程直接跳出loadImage回到processImage
立刻打印Finish
等图片加载完成后，才触发img.onload打印Image Loaded

要实现你期望的顺序，得让processImage知道图片什么时候加载完成，然后再执行Finish。我们可以给loadImage加一个完成回调，在图片加载完成后通知processImage：

function processImage(callback) { 
  console.log("Start"); 
  // 给loadImage传入第二个参数：图片加载完成后要执行的回调
  callback('http://lorempixel.com/400/200/', function() {
    console.log("Finish");
  }); 
}

function loadImage(url, onComplete) { 
  console.log('Load Method');
  var img = new Image(); 
  img.src = url; 
  img.onload = function (event) { 
    console.log('Image Loaded');
    // 图片加载完成后，调用传入的完成回调
    onComplete();
  } 
}

processImage(loadImage);

现在执行顺序就完全符合你的预期了：