为什么JavaScript代码有时执行第二部分

我在画布上画背景，也在那个背景上画一些小图片。但有时，背景会绘制在小图像上。为什么?

JavaScript代码-

var canvasupdate = document.getElementById("myCanvas");
ctxupdate = canvasupdate.getContext("2d");
var background = new Image();
background.src = sitePath + "ATOM/chapter1/book/" + `bgimagename`;
background.onload = function() {
    ctxupdate.drawImage(background, 0, 0); // set background image 
};



var imageobj = new Array();
for (var d = 0; d < calloutImageArray.length; d++) // getting small images in array
{
    imageobj[d] = new Image();
    (function(d) {
        imageobj[d].src = sitePath + "ATOM/chapter1/book/" + calloutImageArray[d];
        imageobj[d].onload = function() {
            ctxupdate.drawImage(imageobj[d], calloutImageArrayX[d], calloutImageArrayY[d], calloutImageArrayW[d], calloutImageArrayH[d]);
        };
    })(d);
}

var canvasupdate=document.getElementById（“myCanvas”）； ctxupdate=canvasupdate.getContext（“2d”）； var background=新图像（）； background.src=sitePath+“ATOM/chapter1/book/”+`bgimagename`； background.onload=函数（）{ ctxupdate.drawImage（背景，0，0）；//设置背景图像 }; var imageobj=新数组（）； for（var d=0；d

---

在上面的代码中，应该先执行背景图像代码，然后调用图像（小图像）代码执行，但有时执行小图像代码，然后执行背景图像代码为什么？

所有图像都是异步加载的。因此，有时小图像在背景图像之前加载（并绘制）。请查看Chrome中的网络选项卡，查看资源加载的顺序

---

此问题的最简单解决方案是将小图像的加载移动到背景图像的

load

事件的回调函数中。

onLoad函数异步运行。这意味着JavaScript将继续运行代码的其余部分，并在加载背景图像时运行回调函数。这就是为什么代码的第二部分首先运行。因此，请尝试在onload函数中添加代码，如下所示：

var canvasupdate = document.getElementById("myCanvas");
ctxupdate = canvasupdate.getContext("2d");
var background = new Image();
background.src = sitePath + "ATOM/chapter1/book/" + `bgimagename`;
background.onload = function() {
    ctxupdate.drawImage(background, 0, 0); // set background image 
    var imageobj = new Array();
    for (var d = 0; d < calloutImageArray.length; d++) // getting small images in array
    {
         imageobj[d] = new Image();
         (function(d) {
            imageobj[d].src = sitePath + "ATOM/chapter1/book/" + calloutImageArray[d];
            imageobj[d].onload = function() {
             ctxupdate.drawImage(imageobj[d], calloutImageArrayX[d], calloutImageArrayY[d], calloutImageArrayW[d], calloutImageArrayH[d]);
           };
         })(d);
    }
};

var canvasupdate=document.getElementById（“myCanvas”）； ctxupdate=canvasupdate.getContext（“2d”）； var background=新图像（）； background.src=sitePath+“ATOM/chapter1/book/”+`bgimagename`； background.onload=函数（）{ ctxupdate.drawImage（背景，0，0）；//设置背景图像 var imageobj=新数组（）； for（var d=0；d 这样，您可以确保先设置背景，然后再设置小图像。请注意，我没有尝试您的代码来检查它是否符合您的要求，我只是重新排列了代码块，以向您展示逻辑以及为什么不按您预期的方式运行。 希望能有帮助