Javascript 问题：即使在添加了onload函数之后，在刷新页面之前也不会加载画布图像

我有一个web应用程序，它使用HTML画布元素在屏幕上绘制多个图像，这些图像作为JSON字符串传递给浏览器。 JSP页面有一个循环来创建所需数量的画布（每个图像1个），并使用JSTL循环动态地提供元素id。下面是我在这些画布上绘制图像的javascript代码

for (i = 0; i < numOfImages; i++)
{
    canvasId = 'canvas' + count;   //canvasId is dynamically assigned values as canvas0, canvas1, etc..
    canvas = document.getElementById(canvasId);
    ctx = canvas.getContext('2d');
    var img = new Image();
    test = json[i]["source"];
    img.src = 'data:image/jpg;base64,' + test;
    ctx.drawImage(img, 20, 20);
}

for（i=0；i

在第一次加载页面后刷新页面之前，此代码不会加载图像。在搜索问题后，我发现我需要对图像使用onload函数。所以我修改了上面的代码如下。（以注释//修改行结尾的行与前面的代码不同）

for（i=0；i

但是当页面第一次加载时，图像仍然没有加载。除此之外，即使我像以前一样刷新页面，它也不会加载

---

有人能告诉我如何克服这个问题吗？

在设置img.onload回调函数后尝试设置img.src。Javascript是单线程阻塞语言，当前执行不能被事件中断。onload是一个事件，在所有当前执行结束（即循环完成后）之前不会触发，并且您只有一个名为

img

的变量，该变量一次只能保存值。通常，您不应该在循环中声明函数。对于乱码修复，请将onload中的语句更改为

ctx.drawImage（this，20,20）

for (i = 0; i < numOfImages; i++)
{
    canvasId = 'canvas' + count;   //canvasId is dynamically assigned values as canvas0, canvas1, etc..
    canvas = document.getElementById(canvasId);
    ctx = canvas.getContext('2d');
    var img = new Image();
    test = json[i]["source"];
    img.src = 'data:image/jpg;base64,' + test;
    img.onload=function(){          //modified line
    ctx.drawImage(img, 20, 20);};   //modified line
}