jQuery Ajax aspetta che tutte le immagini siano caricate

Question

Sto provando a eseguire una chiamata Ajax con jQuery che funziona bene. Uso l'evento di successo per visualizzare i dati. Sembra tuttavia che il successo venga attivato non appena viene caricato il file HTML esterno. Se ci sono immagini di grandi dimensioni, continuano a caricarsi dopo che sono state mostrate. C'è un modo per visualizzare il contenuto dopo che tutto è stato caricato completamente? Ecco il codice:

$('#divajax').html('<br><div style="text-align: center;"><img src="res/ajax-loader.gif"></div>'); 
$.ajax({ 
    cache: false, 
    url: 'ajax/content.php', 
    success: function(data) { 
      $('#divajax').html(data); 
    } 
}); 

Answer 1

Il plugin che @alex ha scritto non ha funzionato per me per qualche motivo ... Non riuscivo a capire perché. Ma il suo codice mi ha ispirato a trovare una soluzione più leggera che funzioni per me. Usa le promesse di jquery. Si noti che a differenza del plugin @alex, questo non tenta di tenere conto delle immagini di sfondo sugli elementi, solo degli elementi img.

// Fn to allow an event to fire after all images are loaded 
$.fn.imagesLoaded = function() { 

    // get all the images (excluding those with no src attribute) 
    var $imgs = this.find('img[src!=""]'); 
    // if there's no images, just return an already resolved promise 
    if (!$imgs.length) {return $.Deferred().resolve().promise();} 

    // for each image, add a deferred object to the array which resolves when the image is loaded (or if loading fails) 
    var dfds = []; 
    $imgs.each(function(){ 

     var dfd = $.Deferred(); 
     dfds.push(dfd); 
     var img = new Image(); 
     img.onload = function(){dfd.resolve();} 
     img.onerror = function(){dfd.resolve();} 
     img.src = this.src; 

    }); 

    // return a master promise object which will resolve when all the deferred objects have resolved 
    // IE - when all the images are loaded 
    return $.when.apply($,dfds); 

} 

Quindi è possibile utilizzare qualcosa di simile:

$.ajax({ 
    cache: false, 
    url: 'ajax/content.php', 
    success: function(data) { 
     $('#divajax').html(data).imagesLoaded().then(function(){ 
      // do stuff after images are loaded here 
     }); 
    } 
}); 

Speriamo che questo è utile per qualcuno.

Si noti che utilizzando il codice precedente, se uno degli errori delle immagini (ad esempio perché l'URL era sbagliato), la promessa viene comunque risolta e l'errore viene ignorato. Questo potrebbe essere ciò che desideri, ma, a seconda della situazione, potresti decidere di interrompere qualsiasi cosa tu stia facendo se un'immagine non viene caricata.Nel qual caso si potrebbe sostituire la linea onerror come segue:

img.onerror = function(){dfd.reject();} 

E catturare l'errore come questo:

$('#divajax').html(data).imagesLoaded().done(function(){ 
    // do stuff after all images are loaded successfully here 
}).fail(function(){ 
    // do stuff if any one of the images fails to load 
}); 

Answer 2

considerare di usare .load di jQuery()

che ha una descrizione di:

L'evento carico viene inviato ad un elemento quando e tutto il sub- gli elementi sono stati completamente caricati. Questo evento può essere inviato a qualsiasi elemento associato a un URL: immagini, script, frame, iframe e l'oggetto finestra.

Answer 3

È possibile associare qualcosa per gli eventi di carico di sapere quando hanno finito:

$('<img>').bind('load', function() { 
    $(this).appendTo('body'); 
}); 

Oppure si potrebbe usare this plugin.

Answer 4

$('#divajax').html('<br><div style="text-align: center;"><img src="res/ajax-loader.gif"></div>').load(function() { 
$.ajax({ 
    cache: false, 
    url: 'ajax/content.php', 
    success: function(data) { 
      $('#divajax').html(data); 
    } 
}); 
}); 

Answer 5

Credo che la migliore è di utilizzare questo

$(window).ready(function(){ //load your ajax}) 

Answer 6

Si potrebbe utilizzare il mio plugin per jQuery, waitForImages ...

$.ajax({ 
    cache: false, 
    url: 'ajax/content.php', 
    success: function(data) { 

     $('#divajax').html(data).hide().waitForImages(function() { 
      $(this).show(); 
     }); 

    } 
}); 

Questo caricherà la roba nel vostro elemento, nasconderlo e quindi mostrare nuovamente gli elementi img discendenti.

Answer 7

ciò fa scattare su ogni carico img separatamente:

$('img').on('load', function() { 
     // do something 
}); 

ho usato :

var loaded = 0; 
$('img').on('load', function() { 
    loaded++; 
    if(loaded == $('img').length){ 
     // do something 
    } 
}); 

Answer 8

Prova questo codice Funziona bene.

 
$.ajax({ 
    url: "../api/listings", 
    type: 'GET', 
    success: function (html) { 
     $('#container').append(html); 
     $('#container img').on('load', function(){console.log('images loaded')}); 
    }; 
}); 

Answer 9

È possibile utilizzare imagesloaded plugin che è il lavoro con JavaScript e jQuery, provare a utilizzare all'interno ajax success funzione di callback sul contenuto caricato, e nascondere tutti i contenuti, mentre imagesloaded funzione di callback non attiva, vedi sotto codice di esempio

$.ajax({ 
    cache: false, 
    url: 'ajax/content.php', 
    success: function(data) { 
     var $divajax = $('#divajax').html(data).hide(); 
     $divajax.imagesLoaded(function() { 
      $divajax.show(); 
     }); 

    } 
}); 

Answer 10

Ho un piccolo bug quando nessuna immagine viene trovata dal plugin dalla soluzione di Daniel.

Nel caso in cui qualche altro ottenere lo stesso problema:

Cambio:

// if there's no images, just return an already resolved promise 
if (!$imgs.length) {return $.Deferred.resolve().promise();} 

A:

// if there's no images, just return an already resolved promise 
    if (!$imgs.length) { 
     var dfd = $.Deferred(); 
     return dfd.resolve().promise(); 
    }