Les onglets jquery doivent-ils être à l'intérieur de document.ready?

Question

Je suis un peu confus quant à ce que fait exactement document.ready. Selon le tutorial par john resig, document.ready doit contenir du code qui doit être exécuté lorsque la page est chargée. Que dois-je faire si j'ai un code qui déclare des tabulations ou du code qui place des bandes zébrées sur des tables?

Est-ce que tout ce qui va dans document.ready? N'y aura-t-il pas des cas où les utilisateurs verront le contenu chargé en premier, puis verront les surbrillances et les onglets de zebra chargés?

Answer 1

Excellent point .. mais le problème est que si vous exécutez votre code zèbre AVANT le contenu son affect est chargé? Là se trouve le frottement.

Il est possible de saupoudrer votre JS dans votre contenu, de sorte que le contenu au-dessus sera bien sûr chargé avant qu'il ne s'exécute ... mais les jquery libs requises sont-elles également chargées dans ce JS? Maintenant, il y a juste plus que ça peut aller mal. Notez également que l'événement jquery Ready doit toujours être exécuté avant l'événement classique document.onLoad. (qui attend que les images finissent de se charger)

Answer 2

En général, si cela affecte quelque chose dans le DOM, vous devriez le mettre à document.ready. Alors oui, vos onglets et bandes de zèbres devraient y aller.

Answer 3

Vous devez mettre du code pour les onglets jQuery dans la fonction onDOMReady. Pour être du côté sûr utiliser la fonction jQuery fournit:

$(function(){ 
    //put your tab/zebra stripes code here 
}); 

En utilisant cette fonction vous assurez que le code nécessaire est exécuté lorsque le DOM est prêt pour la modification (mais la page elle-même peut-être pas complètement chargé). Votre autre code qui charge sur document.ready serait probablement mieux à l'intérieur de cette fonction, car en utilisant document.ready, les utilisateurs peuvent voir des scintillements à l'écran lorsque vous chargez du JavaScript dynamique.

Answer 4

Bien sûr, vous pouvez toujours utiliser le javascript classique pour des choses simples comme les zébrures et jQuery pour les choses plus difficiles.

Answer 5

L'événement ready se déclenche lorsque le DOM a été complètement chargé alors que l'événement de chargement se déclenche lorsque le DOM est chargé + toutes les images référencées par le DOM sont également téléchargées. Cela signifie qu'à moins que votre code d'initialisation n'utilise des images du DOM, vous devez utiliser l'événement ready. See this page par exemple sur ce qui se passe si vous essayez d'accéder à des images à partir du DOM dans votre événement de chargement.