caso de asignación a DIV cuando se ha cargado completamente

Question

¿Puedo asignar un evento a un div para disparar cuando todos los elementos de la div que contiene han cargado completamente? p.ej. si el div contiene una imagen, activa un evento en el div cuando la imagen se haya cargado por completo. Estoy usando jquery.

Answer 1

No

seguro de cómo va a añadir dinámicamente su contenido, pero este ejemplo debe ilustrar cómo podría funcionar.

está utilizando .append() para simular su contenido dinámicamente cargado. a continuación, después de la anexados, se utiliza .find() para encontrar las imágenes y .load() para fijar un controlador de carga para ellos.

Finalmente, devuelve el length propiedad de las imágenes. Luego, en el controlador de carga, a medida que las imágenes terminan de cargarse, la longitud disminuye. Una vez que llega al 0, se cargan todas las imágenes y se ejecuta el código dentro de if().

Ejemplo:http://jsfiddle.net/ehwyF/

var len = $('#mydiv').append('<img src = "http://dummyimage.com/150x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/160x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/170x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/180x90/f00/fff.png&text=my+image" />') 
    .find('img') 
    .load(function() { 
     if(--len === 0) { 
      alert('all are loaded'); 
     } 
    }).length; 

De esta manera, se ejecuta el código basándose únicamente en las imágenes en #mydiv.

Si hay alguna imagen de allí que no eran dinámico, y por lo tanto no deben recibir el evento .load(), usted debe ser capaz de añadir un filtro para excluir los .not() la propiedad complete es true.

Coloque esto después del .find() y antes del .load().

.not(function(){return this.complete}) 

Answer 2

Es difícil comprobar que sólo un div, pero puedo sugerir el uso de $(window).load() para comprobar si todas las imágenes han cargado?

ACTUALIZACIÓN: Si usa ajax, utilice la devolución de llamada para ver cuándo se cargó el json, y luego adjunte $ ("div # id img"). Load() para ver cuándo se cargaron todas las imágenes. El único problema con esto es que he notado que cuando la imagen está almacenada en la memoria caché, el cargador no se activa. :(

Answer 3

Si es sólo una imagen que está queriendo esperar a que se puede cargar la imagen con el Ajax y luego activar el evento en la devolución de llamada Ajax.

Answer 4

captura el proceso de carga de todas las imágenes en el div, allí recaudar algo de contador global en 1. Si ese contador es igual a la cantidad de imágenes de la div ... todas las imágenes terminado de cargar. Debería ser simple usar jQuery.

Esto funcionará sólo para imágenes, sin embargo, otros elementos no tienen proceso de carga.

Answer 5

Para añadir a Shadow idea del Asistente, puede probar con el siguiente código:

var totalImages = $(".yourImageClass").length; 
var loadedImages = 0; 
$(".yourImageClass").bind("onload", function() { 
    loadedImages++; 
    if (loadedImages == totalImages) { 
     //all images have loaded - bind event to DIV now 
     $("#yourDiv").bind(eventType, function() { 
      //code to attach 
     }); 
    } 
});