Que signifie exactement document-ready dans jquery ?

Question

Supposons que je dispose d'un code HTML

Le fichier base.js se présente comme suit :

$(document).ready(function () {
   obj.init();
}

// ..............

var obj = {...};

C'est surprenant, parfois (pas tout le temps) Firebug me montre l'erreur undefined sur obj.init() appeler ! Si j'ai bien compris, document ready signifie que tous les éléments html, y compris les images, les fichiers javascript ont été téléchargés et exécutés ( ?).

Je pense que pour trouver la cause première de cette erreur, nous devons comprendre ce que signifie exactement l'expression "document prêt". Quelqu'un a-t-il une idée ?

\============================

Mise à jour : je ne devrais peut-être pas parler de l'image ici, mon principal souci concerne le fichier javascript en particulier. Est-ce que "DOM entièrement construit" inclut "tout le code javascript exécuté" ?

\============================

Nouvelle mise à jour : Il semble que les gens ici aient convenu que l'événement "document.ready" NE SERA PAS déclenché tant que TOUT le code javascript n'aura pas été téléchargé et exécuté. Ainsi, la cause première du problème reste inconnue. J'ai contourné ce problème après avoir déplacé le bloc $(document).ready à la fin du fichier javascript.

Answer 1

A partir de la documentation de jQuery.ready() :

Alors que JavaScript fournit la fonction load pour exécuter le code lorsqu'une page est rendue, cet événement n'est pas déclenché tant que tous les éléments, tels que les images, n'ont pas été entièrement reçus. Dans la plupart des cas, le script peut être exécuté dès que la hiérarchie DOM a été entièrement construite. Le gestionnaire passé à .ready() est garantie d'être exécutée une fois que le DOM est prêt, c'est donc généralement le meilleur endroit pour attacher tous les autres gestionnaires d'événements et exécuter d'autres codes jQuery. Lorsque vous utilisez des scripts qui dépendent de la valeur des propriétés de style CSS, il est important de faire référence à des feuilles de style externes ou d'intégrer des éléments de style avant de faire référence aux scripts.

Dans les cas où le code repose sur des ressources chargées (par exemple, si les dimensions d'une image sont requises), le code doit être placé dans un gestionnaire de la fonction load à la place.

Answer 2

En ready se produit lorsque le document est chargé et analysé.

Cela inclut tous les fichiers Javascript, mais no images.

L'événement "ready" se produit après l'analyse du document. Certains navigateurs ont un événement spécifique pour cela, dans d'autres navigateurs, jQuery utilise une minuterie qui interroge le statut du document. Cela signifie que l'événement se produit soit dès que l'ensemble du document est analysé, soit un peu plus tard, en fonction du navigateur. Ce n'est normalement pas un problème, car cela ne se produit pas avant tout ce qui se trouve dans le document est analysé.

Si vous avez besoin que toutes les images soient chargées avant que vous ne fassiez quelque chose, vous devez utiliser l'option load à la place.

Answer 3

Vous devez définir obj avant d'y faire référence.

De plus, document.ready ne signifie pas que les ressources seront chargées, mais seulement que le document a été analysé, de sorte que les ressources se chargent entre document ready et la fonction $(window).load événement.