在繼續執行腳本之前，JavaScript正在等待圖像完全加載

Question

我一直在瀏覽大量JavaScript的答案，但是我還沒有找到真正解決我的問題的方法。我想要做的是加載圖像，獲取像素數據，執行分析，然後加載另一個圖像以重複該過程。

我的問題是我無法預先加載所有圖像，因爲此腳本必須能夠處理大量圖像，並且預加載可能太重。所以我一直試圖通過一個循環加載一個新的圖像，但我堅持在圖像加載和將其繪製到畫布上下文的腳本之間的競爭條件。至少我非常確定這是發生了什麼，因爲腳本可以在預先載入圖像的情況下正常工作（例如，如果之前在加載頁面後刷新）。

正如你所看到的，有幾行代碼被註釋掉了，因爲我對JavaScript非常陌生，並且他們沒有像我認爲的那樣工作，但是我不想忘記他們，如果我稍後需要功能。

這是我認爲是引起問題的代碼片段：

編輯：所以我得到了我的函數如下建議

function myFunction(imageURLarray) { 
    var canvas = document.getElementById('imagecanvas'); 
    console.log("Canvas Grabbed"); 

    if (!canvas || !canvas.getContext) { 
    return; 
    } 

    var context = canvas.getContext('2d'); 

    if (!context || !context.putImageData) { 
    return; 
    } 

    window.loadedImageCount = 0; 
    loadImages(context, canvas.width, canvas.height, imageURLarray, 0); 
} 

function loadImages(context, width, height, imageURLarray, currentIndex) { 
    if (imageURLarray.length == 0 || imageURLarray.length == currentIndex) { 
    return false; 
    } 
    if (typeof currentIndex == 'undefined') { 
    currentIndex = 0; 
    } 

    var currentimage = new Image(); 
    currentimage.src = imageURLarray[currentIndex]; 

    var tempindex = currentIndex; 
    currentimage.onload = function(e) { 

    // Function code here 

    window.loadedImageCount++; 

    if (loadedImageCount == imageURLarray.length) { 

     // Function that happens after all images are loaded here 
    } 
    } 
    currentIndex++; 
    loadImages(context, width, height, imageURLarray, currentIndex); 
    return; 
} 

Answer 1

後，開始工作也許這將幫助：

currentimage.onload = function(e){ 
    // code, run after image load 
} 

如果需要等待圖像加載，下面的代碼將加載下一個圖像（CURRENTINDEX是你的「IMG」變量）：

var loadImages = function(imageURLarray, currentIndex){ 
    if (imageURLarray.length == 0 || imageURLarray.length == currentIndex) return false; 
    if (typeof currentIndex == 'undefined'){ 
     currentIndex = 0; 
    } 
    // your top code 
    currentimage.onload = function(e){ 
     // code, run after image load 
     loadImages(imageURLArray, currentIndex++); 
    } 
} 

取而代之的是 「for」 循環，例如使用此功能：

loadImages(imageURLarray); 

Answer 2

也許試試這個：

http://jsfiddle.net/jnt9f/

設置IMG SRC會讓之前設置onload處理確保即使圖像被緩存也會觸發onload事件

var $imgs = $(),i=0; 
for (var img = 0; img < imageURLarray.length; img++) { 
    $imgs = $imgs.add('<img/>'); 
} 

var fctn = (function fctn(i){ 
    $imgs.eq(i).on('load',function(){ 
     //do some stuff 
     //... 
     fctn(++i); 
    }).attr('src',imageURLarray[i]);  
})(0); 

Answer 3

...其實很多開發商都指向這裏來檢測圖像做了jQuery的事件發生後加載時..

https://github.com/desandro/imagesloaded

如果你能確定何時事件觸發你的圖片加載（用於例如，在圖像開始加載之前在頁面上添加一個Id或類），那麼您應該可以將它與github上的這個插件混合。

祝你好運！