Wie löst ich ein Ladeereignis aus, nachdem das Fenster selbst geladen wurde?

Question

Ich habe ein Framework (vue.js) Einfügen einiger Bilder auf einer Seite ändern (mit einem Router, nicht eine echte Seite aktualisieren). Wenn direkt geladen wird, kann ich die Seite machen einen Ladebildschirm anzuzeigen:

loading = true; 
$(window).on('load', function(){ 
    loading = false; 
}); 

Allerdings ist die $(window).on('load') nicht auslösen, wenn die Seite über den Rahmen navigiert wurde. Dies (ich nehme an) ist, weil die window bereits geladen ist, und das Laden der neuen Bilder ist nicht mehr an das Fenster gebunden. So wird der loading = false nie ausgelöst, weil das Fenster bereits geladen ist.

Hier ist ein extrem vereinfachtes Beispiel, aber es zeigt den gleichen Punkt:

//Loading the initial image, it works fine because it runs on window load. 
console.log('Loading first image...') 
$(window).on('load',function(){ 
    console.log('First image loaded'); 
}); 


$('button').on('click',function(){ 
    $('div').append('<img src="https://placekitten.com/200/300">'); 
    console.log('Loading extra image...'); 

    //This never triggers because the window is already loaded. 
    //I need something to trigger while the appended images are loading 
    $(window).on('load',function(){ 
    console.log('Extra image loaded.'); 
    }); 

}); 

HTML:

<img src="https://placekitten.com/200/300"> 
<button>Click to load extra</button> 
<div></div> 

hier ein codepen ist.

Answer 1

@hakJavs Lösung war auf dem richtigen Weg, aber ich musste einige Änderungen vornehmen. Sie waren groß genug, dass ich mich entschied, meine eigene Antwort zu veröffentlichen. Obwohl seine Antwort nicht unbedingt mein Problem gelöst hat, ist es ein guter Code und könnte eine Lösung für jemand anderes sein. Überprüfen Sie auf jeden Fall beide Antworten.

meine JS-Funktion Hier ist (geht mit dem HTML-Code aus meinem ursprünglichen Beitrag):

$('button').on('click',function(){ 
     $('div').html('<img src="https://placekitten.com/200/400"><img src="https://placekitten.com/100/300">'); 
     var loadingImages = []; 
     //Array of existing images 
     var arrayOfImages = $('div').find('img'); 
     //Loops through array 
     for(var i=0; i < arrayOfImages.length; i++){ 
      //Creates numerical value for each image, puts it in an array of images that are currently loading 
      loadingImages.push(i); 

      //For each image, add a load listener. Pass in i from the for loop so that it gets recorded in the event listener. 
      $(arrayOfImages[i]).on('load', { currentImage: i }, function(event){ 
       //On load, removes the value from the array. Display which image loaded, for debugging. 
       var index = loadingImages.indexOf(event.data.currentImage); 
       loadingImages.splice(index, 1); 
       console.log('image '+event.data.currentImage+' loaded'); 

       //Checks if the array is empty (last image loaded). If so, log all. 
       if(loadingImages.length === 0){ 
        console.log('all loaded'); 
       } 
      }); 

     } 

}); 

Dies hat den Vorteil der in einem Behälter in einer Schleife die Bilder alle durch bereits in der Lage zu sein, und müssen nicht unbedingt verlassen sich auf sein kann ein Datenattribut in dem angehängten HTML angeben. Kann auch mit "Gruppen" von Bildern umgehen, d. H. Mehreren Bildern in derselben HTML-Kette. Also wahrscheinlich erweiterbarer.

Dies hat den Nachteil, dass nach dem Durchlaufen des ersten Satzes keine weiteren Bilder geladen werden können, zB wenn der .html() durch .append() ersetzt wurde. Die ursprünglichen Bilder würden weiterhin vollständig geladen sein, so dass ihre Werte im Array verbleiben würden. Dies könnte möglicherweise mit etwas getan werden, wenn nötig (ich musste nur eine Reihe von Bildern auf einmal laden).

Hier ist ein codepen demonstriert dies: http://codepen.io/Blue_Dragon360/pen/GqjyGJ?editors=1010

Answer 2

Sie einen .load() Zuhörer zu jedem neuen Bild mit einer eindeutigen Kennung hinzufügen und sie mit einer Reihe verfolgen, die Sie eine Funktion, wenn alle Bilder geladen werden, laufen können:

var loadingImages = []; 
$('button').on('click',function(){ 

    //Get unique identifier + add to 'loading' 
    var n = $('div').find("img").length; 
    loadingImages.push(n); 

    //Add image with unique classname 
    $('div').append('<img data-n="'+n+'" src="https://placekitten.com/200/300">'); 

    //Attach load listener to new image 
    $('div').find("img[data-n="+n+"]").load(function(){ 
    var n = $(this).attr('data-n'); 

    //Remove from 'loading' 
    var index = loadingImages.indexOf(n); 
    loadingImages.splice(index, 1); 

    //if 'loading' empty, run function 
    if(loadingImages.length==0){ 
     alert("Loaded All Images"); 
    } 
    }); 
}); 

Beispiel : JSFiddle