为什么JavaScript很难检查图片是否被加载？

Question

为什么如此难以检查img是否已加载JavaScript？使用其他语言，通过循环可以轻松解决这个问题，并且可以在图像加载时解决。

这是一个函数，它在传递文件路径后返回一个加载的img。除了onload似乎没有其他工作来检查图像是否已加载。我无法使用img.complete或任何其他方法，每次都检查循环，直到加载完成，因为它无法正常工作（浏览器将挂起）。

global_image_loaded = 0 
function LOADIMAGE(imagesrc) { 
    global_image_loaded = 0 
    var img = new Image(); 
    img.src = imagesrc + "?" + new Date().getTime(); 

    img.onload = function() { 
     global_image_loaded = 1; 
    } 

    if (global_image_loaded = 1){ 
     return img; 
    } else { 
     return 0; 
    } 
} 

此功能工作正常，直到我尝试绘制图像用下面的函数以帆布：

function IMAGE(elementid, img, x, y, w, h) { 
     var mode = 0; 

     if (w === undefined) { 
      mode = 1; 
     } 

     if (h === undefined) { 
      mode = 1; 
     } 

     var canvas = document.getElementById(elementid); 
     if (! canvas || ! canvas.getContext) { return false; } 
     var ctx = canvas.getContext('2d'); 

     if (mode === 1) { 
      ctx.drawImage(img, x, y); 
     } 

     if (mode === 0) { 
      ctx.drawImage(img, x, y, w, h); 
     } 
    } 

此功能太多，但只有放在一个循环里面，跑了好几次。图像将显示在画布上，但执行一次后不会加载图像。这怎么可能，还没有img已经加载？

我认为这是如何在JavaScript中完成的，遗憾的是img无法返回，需要随时显示。似乎没有办法任意显示图像。

function PLACEIMAGE(elementid, imagesrc, x, y, w, h) { 
    var mode = 0; 

    if (w === undefined) { 
     mode = 1; 
    } 

    if (h === undefined) { 
     mode = 1; 
    } 

    var canvas = document.getElementById(elementid); 
    if (! canvas || ! canvas.getContext) { return false; } 
    var ctx = canvas.getContext('2d'); 

    var img = new Image(); 
    img.src = imagesrc + "?" + new Date().getTime(); 
    img.onload = function() { 

     if (mode === 1) { 
      ctx.drawImage(img, x, y); 
     } 

     if (mode === 0) { 
      ctx.drawImage(img, x, y, w, h); 
     } 
    }; 
} 

Answer 1

好吧，我试图做的似乎是不可能的，或者至少不是很容易在Javascript 参考做：

• Call An Asynchronous Javascript Function Synchronously。
• sleep() in Javascript

TY