爲什麼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