jquery-Ereignis, sobald alle Bilder geladen sind (einschließlich zwischengespeicherte Bilder)?

Question

Ich habe die folgende Funktion, die nur für ajaxing auf einer Seite und das zeigt, ist es, wenn alle Bilder geladen sind:

$.get('target-page.php', function(data){  
    var $live = $('#preview_temp_holder').html(data); 
    var imgCount = $live.find('img').length; 
    $('img',$live).load(function(){ 
     imgCount--; 
     if (imgCount==0){ 
      //DO STUFF HERE ONCE ALL IMAGES ARE LOADED 
      $('#preview_pane').html($live.children()).fadeIn(800); 
      $live.children().remove();    
     } 
    });     
}); 

Das Problem kommt mit gecached Bildern das .load() Ereignis nicht ausgelöst und Erniedrigen somit nicht die imgCount .

Ich weiß, ich muss Nick Craver's solution implementieren, bin mir aber nicht sicher, wie. Kann mir jemand helfen?

Answer 1

Ok, gelang es ihnen verschmolzen zu bekommen:

$.get('target-page.php', function(data){  
    var $live =   $('#preview_temp_holder').html(data); 
    var $imgs =   $live.find('img') 
    var imgCount =  $imgs.length;    

    $imgs.one('load', function() {   
     imgCount--; 
     if (imgCount==0){ 
      //DO STUFF HERE 
      //ALL IMAGES ARE LOADED 
      $('#preview_pane').html($live.children()).fadeIn(800); 

     }   
    }) 
    .each(function() { 
     if(this.complete){ 
      $(this).load(); 
     } 
    }); 
}); 

Anmerkung: ein 404-ing Bild dieses brechen.

Answer 2

Wechsel:

$('img',$live).one('load', function(){ 
    ... 
}); 

Und nach oben append:

$live.find('img').each(function() { 
    if(this.complete) $(this).load(); 
}); 

Im Allgemeinen schlage ich vor, $live.find('img') aus früheren Zählung Anweisung wieder zu verwenden.

Answer 3

Ich habe lange nach Lösungen dafür gesucht. Das auf der jQuery-API-Seite (https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js) vorgeschlagene Plugin funktionierte nicht in Firefox.

Meine Lösung bestand darin, jedes Bild durchzulaufen und nur das Ladeereignis hinzuzufügen, wenn es nicht bereits geladen war (d. H. Zwischengespeichert vom Browser). Der Code enthält unter einem Zähler, war ich mit, dass die Last Ereignisse zu überprüfen, wurden nur für Bilder Brennen nicht bereits im Cache:

$(document).ready(function() { 

    var images = $("img.lazy"); 
    $(".image-wrapper").addClass("loading"); 

    var loadedCount = 0; 
    images 
     .hide() 
     .each(function() { 
      if (!this.complete) { 
       $(this).load(function() { 
        loadedCount++; 
        console.log(loadedCount); 
        displayImage(this); 
       }); 
      } 
      else { 
       displayImage(this); 
      } 
     }); 
}); 

function displayImage(img) { 
    $(img).fadeIn(300, function() { 
     $(this).parents(".image_wrapper").removeClass("loading"); 
    }); 
} 

Ich bin kein Javascript Experte so, wenn Sie irgendwelche Probleme vor Ort mit dieser Lösung tun bitte Gib mir Bescheid. Wie gesagt, es funktioniert in IE8, Chrome und Firefox (nicht sicher über ältere Versionen von IE).