jQuery: documenter les feux prêts trop tôt pour mes besoins

Question

Je développe un site basé autour des photos. Certaines zones de ce site nécessitent des calculs basés sur les dimensions de l'image afin de fonctionner correctement. Ce que j'ai trouvé est que le document prêt tire trop tôt et mon IUG se comporte de façon erratique en conséquence.

J'ai retiré le document fonction prêt et remplacé par le bien « fonction window.onload ol, puisque, si je comprends bien, cette fonction ne se déclenche pas jusqu'à ce que les images sont à pleine charge.

Ma question est-ce que cela pose aucun problème? Et y at-il d'autres solutions que j'ai manqué peut-être?

Merci pour l'aide les gars !!

Answer 1

Il n'y a aucune raison que vous ne pouvez pas utiliser $(window).load() par opposition à $(document.ready(). Vous avez raison sur la fonction non mise à feu jusqu'à ce que les images sont à pleine charge (ou n'a pas réussi à charger).

L'inconvénient de compter entièrement sur $(window).load() sont que dans certains cas, il est évident qu'aucun de votre javascript fonctionne (ie Navigation ou cliquez sur les événements ) jusqu'à ce que chaque article sur votre page chargée. Certains utilisateurs, généralement les utilisateurs de puissance est un site, cliquez sur les pages assez rapidement ce qui nuit à l'expérience globale de l'utilisateur.

heureux moyen serait utilisation $(window).ready() pour la plupart des situations et ne mettre des événements à l'intérieur $(window).load() qu'absolument ont besoin .

Answer 2

Essayez ceci:

$(window).load(function() {
 alert("images are loaded!");
});

Voir ce lien pour une comparaison des $(document).ready() et $(window).load()

http://4loc.wordpress.com/2009/04 / 28 / documentready-vs-windowload /

Answer 3

Altough window.onload conviendrait à vos besoins, je vous recommande d'accélérer les choses un peu:

$("img.load").load(function(){
    alert($(this).width());
});

Maintenant, vous pouvez traiter l'image individuellement aussi rapidement qu'il est chargé et ne pas attendre l'ensemble des éléments.

Answer 4

Voici une solution très simple:

Inclure les attributs width="" et height="" pour toutes les images. Cela va forcer le navigateur à rendre tout correctement et en place avant même les images sont chargées. L'espace requis pour chaque image dans l'immobilier sera correctement mis de côté en charge des images de la page.

Ca y est!

Si vous faites cela, document.ready fonctionnera très bien dans votre scénario. Ce qui se passe est que le navigateur ne connaît pas la taille des images avant qu'elles ne soient récupérées / chargées, de sorte que le navigateur doit deviner. Cela peut provoquer le comportement drôle. Spécification de la largeur et la hauteur de vos images résoudra ce problème.

Je suis surpris que personne n'a mentionné. Il est pas nécessairement un problème javascript, bien que de réponse cballou est un bon conseil.

Quoi qu'il en soit, espérons que vous avez appris quelque chose de nouveau. ;)

Answer 5

Vous pouvez possible, utiliser le load() jquery, mais dans la documentation, il est mentionné qu'il pourrait ne pas fonctionner comme prévu si l'élément a déjà chargé.

  

Remarque: La charge ne fonctionnera que si vous définissez avant l'élément est complètement chargé, si vous définissez après que rien ne se passera. Cela ne se produit pas dans $ (document) .ready (), qui gère jQuery pour fonctionner comme prévu, également lors de la mise après le DOM est chargé.   - http://docs.jquery.com/Events/load

Answer 6

Si vous voulez retarder avec un laps de temps donné peut-être vous pouvez utiliser « setTimeout »:)