¿Hay algo similar a `$ (ventana) .load();` para ejecutar una función después de que el contenido recién insertado de Ajax haya terminado de cargarse?

Question

Después de hacer una solicitud de Ajax haciendo algo simple como $(element).load(url, callback);, habrá contenido nuevo en la página que incluye imágenes y tal.

¿Hay alguna manera de hacer algo similar al $(window).load(callback) después de que el nuevo contenido haya terminado de cargarse?

$(window).load(); funciona bien cuando la página está fresca para que pueda mostrar una animación de carga hasta que se carga todo el contenido, pero parece que falta algo así como simple cuando se carga contenido después de que $(window).load() ya se ha activado.

EDIT 6/6/12 11:55 pm: Creo que todos están malinterpretando mi pregunta. Permítanme explicarlo un poco mejor:

Cuando carga por primera vez una página, puede aprovechar estos dos eventos con jQuery: $(document).ready(); y $(window).load();. El primero se dispara cuando el DOM está listo y el segundo se dispara cuando se termina de cargar el contenido (imágenes, etc.). Después de actualizar la página usando el método de jQuery .load(), soy plenamente consciente de que puedo pasar una devolución de llamada para que se ejecute después de que se complete el Ajax.

Eso es no lo que quiero. Quiero ejecutar una función después de que el contenido nuevo esté terminado de cargar, similar a cuando $(window).load(); se dispara después de que el contenido inicial de una página haya terminado de cargarse.

¿Tiene sentido? ¿Cómo podemos crear un evento similar al $(window).load(); para hacer cosas después de que el contenido de Ajax haya terminado de cargarse (no justo después de insertar el HTML)?

Answer 1

Según jQuery:

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

Así, después de que el DOM se ha actualizado (con contenido Ajax'ed por ejemplo), me he fijado un oyente para los eventos de 'carga' a todas las imágenes recién insertados:

function when_images_loaded($img_container, callback) { // do callback when images in $img_container (jQuery object) are loaded. Only works when ALL images in $img_container are newly inserted images and this function is called immediately after images are inserted into the target. 
    var _imgs = $img_container.find('img'), 
     img_length = _imgs.length, 
     img_load_cntr = 0; 

    if (img_length) { //if the $img_container contains new images. 
     _imgs.on('load', function() { //then we avoid the callback until images are loaded 
      img_load_cntr++; 
      if (img_load_cntr == img_length) { 
       callback(); 
      } 
     }); 
    } 
    else { //otherwise just do the main callback action if there's no images in $img_container. 
     callback(); 
    } 
} 

Esto es agradable para permitir que el contenido permanezca oculto hasta que las imágenes estén listas. Si tiene imágenes de fondo que se mostrarán como imágenes de fondo, esto no funcionará.Una solución sería cargar todas las imágenes que está utilizando en sus estilos CSS en un contenedor que permanecerá oculto para que la función anterior le permita cargar las imágenes. Una vez que todas las imágenes están cargadas, puede eliminar el elemento que contiene sus imágenes exclusivas de CSS y de esa manera el navegador mostrará fondos (etc.) instantáneamente cuando muestre su contenido.

Answer 2

Creo que no. Simplemente necesita desencadenar el evento ajax de éxito que se ejecutará después de que ajax se complete. Es suficiente para ti. No necesita eventos como .load() para elementos específicos devueltos por ajax. Pero se puede intentar adjuntar el evento load() para el elemento HTML como después es devuelto por el servidor, pero antes de que se inserta a DOM

Answer 3

$(element).load(url, function(){ 
    //this code is executed after the page is loaded 
}) 

Es esto lo que quiere decir?

Answer 4

suena como si estuvieras buscando un enfoque global para manejar todos los eventos completos de ajax. puede hacerlo de esta manera.

$(document).ready(function() { 
    $(document).ajaxComplete(function() { alert('ajax completed.') }); 
    $('#d').load("url-to-page", function (response, status, xhr) { 
     if (status == "error") { 
      var msg = "Sorry but there was an error: "; 
      alert(msg + xhr.status + " " + xhr.statusText); 
     } 
    }); 
}); 

Answer 5

Me encontré con este problema hace unos días y utilicé su respuesta a su pregunta en ese momento, pero desde entonces tropecé con el complemento imagesLoaded que puede ser útil para cualquier otra persona en el futuro.