我正在使用 JavaScript 和canvas. 随着游戏加载，所有将使用的图像都被缓存。
观察资源时间线，看到如下代码触发了一个异步请求：
var sprite = new Image();
sprite.src = "sprites/sheet1.png";
引擎将继续执行，最终开始绘制和播放关卡。在绘制第一帧之后加载的图像可能永远不会出现，因为剪裁（即没有变得“脏”）。
所以我测试了以下内容：
console.log("begin");
var sprite = new Image();
sprite.onload = function() { console.log('loaded!'); };
sprite.src = "sprites/sheet1.png";
console.log("end");
结果控制台输出按它们出现的顺序是：
beginendloaded!我正在寻找$.ajax与 with类似的方法async: false来执行加载。无法弄清楚如何......提前感谢您的帮助！J。
你不应该进行任何同步（甚至 AJAX）调用，而只是将你的代码放在适当的回调中：
function loadSprite(src, callback) {
var sprite = new Image();
sprite.onload = callback;
sprite.src = src;
}
然后像这样使用它：
loadSprite('sprites/sheet1.png', function() {
// code to be executed later
});
如果你想传递额外的参数，你可以这样做：
sprite.onload = function() {
callback(whatever, args, you, have);
};
如果要加载多个元素并需要等待所有元素完成，请考虑使用 jQuery延迟对象：
function loadSprite(src) {
var deferred = $.Deferred();
var sprite = new Image();
sprite.onload = function() {
deferred.resolve();
};
sprite.src = src;
return deferred.promise();
}
在加载精灵的函数中，您可以执行以下操作：
var loaders = [];
loaders.push(loadSprite('1.png'));
loaders.push(loadSprite('2.png'));
loaders.push(loadSprite('3.png'));
$.when.apply(null, loaders).done(function() {
// callback when everything was loaded
});
这个问题很老了，但是有一种方法可以在不需要 jquery 或冻结浏览器的情况下做到这一点。
在 image1.onLoad 中，让它加载 image2。
在 image2.onLoad 中，让它加载 image3。
在 image3.onLoad 中，让它加载 image4。
....
在图像n .onLoad 让它加载你的主要功能。
我不确定这是否是最好的方法，但至少比冻结浏览器要好。
您还可以加载所有音频文件或您需要的任何其他资源，或者您需要运行的任何其他 javascript。
不需要冻结浏览器
我在画布上遇到了这个问题，我尝试了您的解决方案，但最好且最简单的方法是：
function COLPOinitCanvas(imagesfile) {
COLPOcanvas = document.getElementById("COLPOcanvas");
COLPOctx = COLPOcanvas.getContext("2d");
var imageObj = new Image();
imageObj.src = imagesfile;
imageObj.onload = function () {
COLPOctx.drawImage(imageObj, 0, 0, COLPOcanvas.width, COLPOcanvas.height);
};
}