jQuery Ajax load HTML-Inhalt mit Bild, wie Sie überprüfen, ob alle Bilder geladen sind?

Dies ist eine grobe version einer Lösung, die ich verwendet habe, in einer ähnlichen situation. numLoaded ist jedes mal aktualisiert, wenn die load - Methode ausgeführt wird, die es Ihnen ermöglicht zu überprüfen, ob die Prognose ( numImage ) ist gleich der Summe der geladenen Bilder.

var img =  $( '#mindIndexSummary' ).find( 'img' )
  , numImage = img.length;

img.on( 'load', function(){

    var self = $( this )
      , numLoaded  = self.attr( 'data-loaded', true ).length;

    self.attr( 'data-loaded', true );

    if( numImages === numLoaded ) 

    funcToCall();   


});

Können, können Sie auch einen Schritt weiter gehen und setzen Sie ein data Attribut auf das übergeordnete element, das es erlauben würde, die Sie auslösen/beenden andere Ereignisse basierend auf den Wert.

var parent = $( '#mindIndexSummary' )
  , img =  $( '#mindIndexSummary' ).find( 'img' )
  , numImage = img.length;

img.on( 'load', function(){

    var self = $( this )
      , numLoaded  = self.attr( 'data-loaded', true ).length;

    parent.attr( 'data-load', 'loading' );
    self.attr( 'data-loaded', true );

    if( numImages === numLoaded ) 

    parent.attr( 'data-load', 'complete' );
    funcToCall();   


});

if( parent.attr('data-load').slice( 0, 7 ) === 'loading' )
do something else

Dies ist eine Beschreibung, wie man erstellen Sie eine Globale variable (ein array), die wird verfolgen jedes einzelne Bild geladen wird. Auf diese Weise können Sie aktiv zu prüfen, wenn alle Bilder geladen sind, mit Hilfe von callback-Funktionen.

var image_state_array = new Array(false, false, false, false, false, false, false, false, false, false);

Jede position im array wird verfolgen, welches Bild geladen wurde. So zum Beispiel, wenn Bild 2 in der Liste der 10 Bilder geladen wurden, das array würde dann so Aussehen (denken Sie daran array-Indizes bei 0 beginnen):

var image_state_array = new Array(false, false, true, false, false, false, false, false, false, false);

Können sagen, Sie haben eine Liste der Bilder, Sie sind dynamisch nachladen basierend auf Benutzer-Interaktion (z.B. klickt der Benutzer auf aktualisieren, um eine neue Reihe von Bildern zur Auswahl). Sobald alle Bilder geladen haben, möchten Sie warnen den Benutzer, dass die Bilder geladen haben (oder eine andere Art von Funktion). Starten Sie durch das erste einrichten ein onload-event des Bildes, das geladen wird.

//get image 0

var image = document.getElementsByClassName("search_images")[0];

//track the image load state 

image.onload = function(){
      trackImageLoadState(0); //note that 0 is the image index from the list of elements 
}

Nächsten Satz die Quelle der Bild, wie Sie normalerweise tun würde. Dies löst den onload selbst und die Funktion aufrufen.

//set the source of the image, 

    image.src = desireImagePNG;

Den track image-load-Zustand wird hinzufügen, dass das Bild geladen hat, um die image_state_array, tracking, dass image0 geladen hat. Nach Aufzeichnungen, die image0 geladen wurde, durchläuft es die image_state_array und zählt, wie viele der zurückgegebenen Bilder geladen haben. Wenn das genug Bilder geladen haben Sie ausführt, was auch immer Funktion, die Sie versuchen zu erreichen. In diesem Beispiel bin ich verblassen aus der laden-Bildschirm.

    function trackImageLoadState(numImage){
      //debug print
      //console.log("numImage: " + numImage);

      //set the array image value to true of the passed in index 
      image_state_array[numImage] = true;

      //debug print
      //console.log("image_state_array[numImage] " + image_state_array[numImage] );

      var loadedImagesCount = 0;

      //loop through the array and count the amount of images that have loaded
      for(var counter2 = 0; counter2 < image_state_array.length; counter2++){
        //debug print
        //console.log("image_state_array[counter] " + image_state_array[counter2] + "counter" + counter2 );

        if(image_state_array[counter2]){
          loadedImagesCount++;
        }
      }

      //debug print
      //console.log("loadedImagesCount: " + loadedImagesCount);

      //if the amount of images required to be loaded has been met, execute function. If you want to know when all images have been loaded, you need to set the if statement condition to the total count of images. For example:
if(loadedImagesCount>10){} if you have 10 images. 

  if(loadedImagesCount>5){

    //fade out the loading screen - any other function will work here as well
    fadeOutMainLoadingScreen();

  }

}

Beachten Sie, dass die globalen Variablen werden zurückgesetzt, jedesmal, wenn die action wieder aufgerufen. Diese kann getan werden, wie unten gezeigt:

//reset the global variable array to track the new load of images 

for(var i = 0; i < image_state_array.length; i++){
  image_state_array[i] = false;
}

Dies ist ein effektiver Weg, um zu verfolgen, welche Bilder geladen haben, über eine callback-Funktion und eine Globale variable. Bitte Kommentar, wie ich weiß, es könnte wahrscheinlich verbessert werden und mehr Dynamik. Danke!