jQuery Ajax espere hasta que se carguen todas las imágenes

Estoy tratando de realizar una llamada Ajax con jQuery, que funciona bien. Utilizo el evento de éxito para mostrar los datos. Sin embargo, parece que el éxito se activa tan pronto como se carga el archivo HTML externo. Si hay imágenes grandes, continúan cargando después de que se muestran. ¿Hay alguna manera de mostrar el contenido después de que todo esté completamente cargado? Aquí está el código:

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

El plugin que @alex escribió no funcionó para mí por alguna razón … No pude entender por qué. Pero su código me inspiró a encontrar una solución más liviana que esté funcionando para mí. Utiliza las promesas jquery. Tenga en cuenta que, a diferencia del complemento de @alex, esto no intenta contabilizar las imágenes de fondo en los elementos, solo elementos 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); } 

Entonces puedes usar algo como esto:

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

Espero que sea útil para alguien.

Tenga en cuenta que al usar el código anterior, si uno de los errores de imagen (por ejemplo, porque la URL fue incorrecta), la promesa se resuelve de todos modos y el error se ignora. Esto podría ser lo que quiera, pero, dependiendo de su situación, podría querer abortar lo que esté haciendo si una imagen no se carga. En ese caso, puede reemplazar la línea onerror de la siguiente manera:

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

Y capte el error así:

 $('#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 }); 

Podrías usar mi plugin jQuery, waitForImages …

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

Esto cargará las cosas en su elemento, lo ocultará y luego lo mostrará una vez que los elementos de img descendientes se hayan cargado.

Puede vincular algo a los eventos de carga para saber cuándo terminan:

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

O podrías usar este complemento .

esto se dispara en cada carga de img por separado:

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

solía:

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

Puede usar el complemento imagesloaded que funciona con JavaScript y jQuery, intente usar la función de retorno de llamada success ajax en el contenido cargado y oculte todo el contenido mientras la función de callback de imagesloaded no se active, vea el código de muestra a continuación.

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

Busca usar .load () de jquery

Que tiene una descripción de:

El evento de carga se envía a un elemento cuando este y todos los subelementos se han cargado por completo. Este evento se puede enviar a cualquier elemento asociado a una URL: imágenes, scripts, marcos, iframes y el objeto de la ventana.

 $('#divajax').html('
').load(function() { $.ajax({ cache: false, url: 'ajax/content.php', success: function(data) { $('#divajax').html(data); } }); });

Prueba este código Funciona bien.

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

Tengo un pequeño error cuando el plugin no encuentra imágenes de la solución de Daniel.

En caso de que alguien más tenga el mismo 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(); } 

Creo que lo mejor es usar esto

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