L'ordre de $(document).load() et $(document).prêt() lors de différer le chargement de js

Avant que je change tout mon code, je veux juste vérifier que j'en ai besoin.

J'ai plusieurs inline js et jquery fonctions qui sont dans le prêt() fonction:

$(document).ready(function(){ do_something(); ...

La plupart de ces fonctions s'appuient sur d'autres fonctions qui sont contenues dans un js externe document. Ils utilisent aussi des classes qui sont définies dans la feuille de style externe.

Maintenant, j'ai juste changé le chargement de mon externe css et js tel qu'il est différé (comme recommandé par Google https://developers.google.com/speed/docs/best-practices/payload?hl=en#DeferLoadingJS):

 if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

De cette façon, la page est entièrement affiché, y compris toutes les images, avant qu'il commence à charger le JS.

Cela fonctionne bien. Cependant, je me demande pourquoi et si il le sera toujours. N'est-ce pas le $(document).prêt() exécutée avant onLoad? Ne vais-je pas le risque de ne pas avoir les fonctions nécessaires définis lors de l' $(document).prêt est exécuté?

Donc, ce que je dois changer tous les $(document).prêt de $(document).load()? Ou, au moins certains d'entre eux? Mais alors qui onLoad() est exécutée en premier? Celle qui se charge de la js externe (qui est défini dans l'en-tête) ou de la ligne? que dois-je perdre en changeant prêt à charger? Pourrais-je, par exemple, le risque qu'un événement n'est pas attaché à un élément lorsqu'un utilisateur clique sur l'élément?

Btw, l'api jquery n'est pas reporté à cause qui a provoqué des problèmes quand je suis allé pour exécuter le code.

OriginalL'auteur user984003 | 2013-01-06

  1. 6

    Essayez d'utiliser

     $(window).load(function(){
 dosomething();
 });

    Il sera exécuté le js après l'ensemble de la page est chargée.

    Éviter d'utiliser

    $(document).ready(function(){
 dosomething();
 });

    Il sera exécuté le js juste après le chargement du DOM.

    OriginalL'auteur Chunky

  2. 2

    L'ordre d'exécution est comme suit:

    1. ready() se déclenche lorsque le DOM (HTML) est prêt et les scripts sont chargés.
    2. load() se déclenche lorsque tout le reste a fini de charger trop: HTML, Scripts,
      CSS, Images

    En règle générale, placez tous les scripts en dehors du prêt et de la charge des gestionnaires, de sorte que les fonctions sont chargés par le temps ils ont.
    Alors gardez tous les écouteurs d'événements à l'intérieur du prêt de gestionnaire et d'appeler toutes les fonctions sur demande.

    Haut niveau JS structure ressemble à ceci:

    1. Bibliothèque jQuery
    2. Plugins/scripts Tiers
    3. Scripts personnalisés
    4. $(document).ready() emballage minimal JS logique d'écoute pour les événements DOM

    OriginalL'auteur Oriol