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

Question

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('<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

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); 

} 

A continuación, se puede 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 
     }); 
    } 
}); 

Con suerte eso es útil para alguien.

Tenga en cuenta que si utiliza el código anterior, si uno de los errores de imagen (por ejemplo, porque la URL era 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 cuyo caso podría reemplazar la línea onerror de la siguiente manera:

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

y coger el error como este:

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

ver en el uso .load de jQuery()

que tiene una descripción de:

El evento de carga se envía a un elemento cuando él y toda sub los elementos han sido completamente cargados. Este evento se puede enviar a cualquier elemento asociado a una URL: imágenes, scripts, marcos, iframes y el objeto de la ventana.

Answer 3

Puede enlazar algo a los eventos de carga para saber cuando terminan:

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

O usted podría utilizar 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

Creo que lo mejor es usar este

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

Answer 6

Se podía usar mi plugin de 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, ocultarlo , y luego volver a mostrarlo una vez que los elementos descendientes img se hayan cargado.

Answer 7

esto desencadena en cada carga img separado:

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

i utilizado :

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

Answer 8

Probar este código Funciona bien.

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

Answer 9

Puede utilizar imagesloaded plugin que es trabajar con JavaScript y jQuery, trate de usar el interior ajax success función de devolución de llamada en el contenido cargado, y ocultar todo el contenido, mientras que imagesloaded función de devolución de llamada no activa, véase más abajo el código de ejemplo

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

    } 
}); 

Answer 10

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

Por si acaso alguna otra cosa sale el mismo problema:

Cambio:

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

Para:

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