semble que la fonction .charger () ne se déclenche pas si l'image a été mise en cache auparavant. Donc, si vous voulez vous assurer que les images ont été chargées avant de charger et d'afficher une autre (version à la fois), vous ne pouvez pas faire quelque chose comme: alors comment s'assure-t-on l'ordre de chargement en jQuery?
4 Réponses :
Ce que vous devrez faire est de gérer sélectivement vos liaisons de charge. Vous pouvez vérifier la charge en testant la propriété d'objet image Par exemple: Notez que ci-dessus, complète . Ceci (utilisé seul) fait référence à la référence DOM à l'objet Image fourni par JQuery.
Est-ce que cela a été utile? Notez que vous pouvez déclencher votre gestionnaire de charge dans la clause el / code> comme ci-dessus si cela est requis.
Une idée de la compatibilité à ce sujet?
Support large, voir la matrice de navigateur ici: w3schools.com/jsref/prop_img_commlete.asp - - Une chose à garder à l'esprit est que vous voudrez peut-être tester un attribut SRC valide avant de vérifier la propriété complète. De nombreux navigateurs reviendront pour un SRC vide (par exemple: la source vide est complète en ce qu'elle ne se charge pas / ne chargait pas)
Merci Sparkey,
Je vais donner cela un essai, mais ça a l'air bien. J'ai trouvé une discussion approfondie sur le sujet ici: http://www.bennadel.com/blog/1007-jquérie-attr-fonction-DoSn-t-work-with-Image-Complelte.htm
Ce qui me conduit à "jQuery" oneimagesload 'plugin "ici: http://includes.cirkuit.net/includes/js/jquery/plugins/onimagesload/1.1/documentation/
qui semble résoudre le problème comme SO: < PRE> XXX
, qui revient à peu près à ce que vous avez dit, seul son chèque terminé a également testé pour "indéfini".
Si vous souhaitez emballer toute cette fonctionnalité dans une méthode d'extension de jQuery, essayez ceci (qui devrait fonctionner en attente de n'importe quel nombre d'images): puis utiliser simplement comme ceci: < / p>
Vous pouvez également vérifier si votre image a une largeur ou une hauteur pour détecter s'il a déjà chargé.
Par exemple: P>
var img = _content.find('img');
if(img[0].width >0 || img[0].height > 0 ) {
console.log('already loaded image');
} else {
img.on('load', function() {
console.log('image loaded');
});
}
Quand ce code est-il exécuté? Est-ce à l'intérieur d'un $ (document) .Ready?