JavaScript czeka, aż obraz zostanie w pełni załadowany przed kontynuowaniem skryptu

Question

Szukałem wielu odpowiedzi na JavaScript, ale nie znalazłem takiego, który naprawdę odpowie na mój problem. Próbuję załadować obraz, pobrać dane piksela, przeprowadzić analizę, a następnie załadować kolejny obraz, aby powtórzyć proces.

Mój problem polega na tym, że nie mogę wstępnie wczytać wszystkich obrazów, ponieważ ten skrypt musi być w stanie pracować na dużych ilościach obrazów, a wstępne ładowanie może być zbyt dużym zasobem. Tak więc utknąłem próbując załadować nowy obraz za każdym razem, gdy przechodzę przez pętlę, ale utknąłem z powodu wyścigu pomiędzy ładowaniem obrazu a scenariuszem rysującym go w kontekście płótna. Przynajmniej jestem całkiem pewien, że tak właśnie się dzieje, ponieważ skrypt będzie działał dobrze z wyeksponowanymi obrazami (na przykład, jeśli odświeżam po wczytaniu strony wcześniej).

Jak widzisz, kilka linii kodu zostało zakomentowanych, ponieważ jestem niesamowicie nowy w JavaScript i nie działały tak, jak myślałem, ale nie chciałem o nich zapomnieć, jeśli potrzebował później funkcjonalności.

Jest to fragment kodu, który moim zdaniem jest powodującego problemu:

EDIT: Więc mam moją funkcję do pracy po wykonaniu sugestii

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

Może to pomoże:

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

Jeśli jest to konieczne, aby czekać na zdjęcie, aby załadować poniższy kod wczytuje następny obraz (currentIndex jest zmienna „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++); 
    } 
} 

Zamiast pętli "for", wykorzystać na przykład tej funkcji:

loadImages(imageURLarray); 

Answer 2

Może spróbuj tego:

http://jsfiddle.net/jnt9f/

Ustawianie obsługi onload przed ustawieniem img src uczyni pewność, że zdarzenie onload zostanie uruchomione, nawet obraz zostanie zbuforowany

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

Właściwie ... wiele deweloperów wskazują tutaj, aby wykryć, kiedy zdjęcia są wykonywane po załadowaniu zdarzenia jQuery ..

https://github.com/desandro/imagesloaded

Jeśli można ustalić, gdy zdarzenie wyzwala swoje obrazy do załadowania (dla przykład, dodając identyfikator lub klasę na stronie tuż przed rozpoczęciem ładowania obrazów), powinieneś być w stanie połączyć to z tą wtyczką na github.

Powodzenia!