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, se siguen 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); } });
El complemento que escribió @alex no funcionó para mí por alguna razón... No pude entender por qué. Pero su código me inspiró a idear una solución más liviana que funciona para mí. Utiliza promesas de jquery. Tenga en cuenta que, a diferencia del complemento de @alex, esto no intenta tener en cuenta las imágenes de fondo en los elementos, solo los 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 usarlo 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 }); } });
Esperemos que sea útil para alguien.
Tenga en cuenta que al usar el código anterior, si una de las imágenes falla (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 desea, pero, dependiendo de su situación, es posible que desee cancelar 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 atrapa 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 volverá a mostrar una vez que se hayan cargado los elementos img
descendientes.
Puede vincular algo a los eventos de carga para saber cuándo terminaron:
$('<img>').bind('load', function() { $(this).appendTo('body'); });
O podrías usar este complemento .