Affecter un événement à div quand il est entièrement chargé

Question

Puis-je affecter un événement à un div à feu lorsque tous les éléments de la div contenant ont été chargés complètement? par exemple. Si la div contient une image, déclenchez un événement sur la div lorsque l'image est entièrement chargée. J'utilise jquery.

Answer 1

Je ne sais pas comment vous ajoutez dynamiquement votre contenu, mais cet exemple devrait illustrer comment cela pourrait fonctionner.

il utilise .append() pour simuler votre contenu dynamiquement chargé. Puis, après l'ajout, il utilise .find() pour trouver les images et .load() pour fixer un gestionnaire de charge pour eux.

Enfin, il renvoie le length propriété des images. Ensuite, dans le gestionnaire de charge, lorsque les images finissent de charger, la longueur est décrémentée. Une fois qu'il obtient à 0, toutes les images sont chargées, et le code à l'intérieur du if() s'exécute.

Exemple: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 cette façon, les pistes de code basées uniquement sur les images #mydiv.

S'il y a des images là-dedans qui ne sont pas dynamiques, et ne devrait donc pas obtenir l'événement .load(), vous devriez être en mesure d'ajouter un filtre .not() à exclure les biens complete est true.

Placez ceci après le .find() et avant le .load().

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

Answer 2

Il est difficile de le vérifier pour une seule div, mais puis-je suggérer d'utiliser $(window).load() pour vérifier si toutes les images ont été chargées? Si vous utilisez ajax, utilisez le rappel pour voir quand json a été chargé, puis ajoutez $ ("div # id img"). Load() pour voir quand toutes les images ont été chargées. Le seul problème avec ceci est que j'ai remarqué quand l'image est mise en cache, le chargeur ne se déclenche pas. :(

Answer 3

Si c'est juste une image que vous avez envie d'attendre, vous pouvez charger l'image avec ajax, puis déclencher l'événement dans le rappel ajax.

Answer 4

Catch l'événement onload de toutes les images dans la div, en y élever un certain compteur global de 1. Si ce compteur est égale à la quantité d'images dans la div ... toutes les images ont terminé le chargement. Devrait être simple en utilisant jQuery.

Cela ne fonctionnera que pour les images, les autres éléments n'ont pas d'événement onload.

Answer 5

Pour ajouter à l'idée de l'Ombre Assistant, vous pouvez essayer le code suivant:

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