assegnare l'evento a div quando è stato caricato completamente

Question

Posso assegnare un evento a un div da attivare quando tutti gli elementi del div contenitore sono stati caricati completamente? per esempio. se il div contiene un'immagine, attiva un evento sul div quando l'immagine è stata caricata completamente. Sto usando jquery.

Answer 1

Non sono sicuro di come si sta aggiungendo dinamicamente il contenuto, ma questo esempio dovrebbe illustrare come potrebbe funzionare.

sta usando .append() per simulare il vostro contenuto caricato in modo dinamico. Poi, dopo l'accodamento, utilizza .find() per trovare le immagini e .load() ad allegare un gestore del carico a loro.

Infine, restituisce il length proprietà delle immagini. Quindi, nel gestore di carico, al termine del caricamento delle immagini, la lunghezza viene decrementata. Quando arriva a 0, tutte le immagini vengono caricate e viene eseguito il codice all'interno di if().

Esempio: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; 

In questo modo, viene eseguito il codice basato solo sulle immagini in #mydiv.

Se ci sono immagini in là che non erano dinamica, e quindi non dovrebbe ottenere l'evento .load(), si dovrebbe essere in grado di aggiungere un filtro .not() per escludere quelle proprietà complete è true.

Posizionare questo dopo .find() e prima dello .load().

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

Answer 2

È difficile controllarlo per un solo div, ma posso suggerire di utilizzare $(window).load() per verificare se tutte le immagini sono state caricate?

UPDATE:. Se si utilizza Ajax quindi utilizzare il callback per vedere quando il JSON è stato caricato, e quindi collegare $ ("div # id img") Carico() per vedere quando tutte le immagini sono caricate. L'unico problema con questo è che ho notato quando l'immagine è memorizzata nella cache, il caricatore non viene attivato. :(

Answer 3

Se si tratta di una sola immagine hai intenzione di aspettare che si può caricare l'immagine con l'Ajax e quindi attivare l'evento in callback Ajax.

Answer 4

Cattura l'evento onload di tutte le immagini nella div, in là sollevare qualche contatore globale di 1. Se questo contatore è uguale alla quantità di immagini nella div ... tutte le immagini terminato il caricamento. Dovrebbe essere semplice usando jQuery.

Questo funziona solo per le immagini, tuttavia, altri elementi non hanno un evento di caricamento.

Answer 5

Per aggiungere a Shadow idea del Mago, si potrebbe provare il seguente codice:

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