jQuery propose trois méthodes pour gérer le chargement du document :

// Prêt du document
$(document).ready(function(){
        //... code à exécuter...
})

// Syntaxe abrégée du document ready
$(function(){
     //... code à exécuter...
})

// Événement de chargement complet
$(document).on('load', function(){
    // ... code à exécuter ...
})

Que distingue l'événement ready de l'événement load ?

Lors des entretiens techniques, une question fréquente est : entre ready et load, quel événement se déclenche en premier ? La réponse est : ready s'exécute avant load.

Étapes du chargement d'un document DOM :

1. Analyse de la structure HTML.
2. Chargement des scripts externes et des feuilles de style
3. Analyse et exécution du code JavaScript
4. Construction du modèle DOM HTML. // Déclenchement de ready
5. Chargement des éléments externes comme les images
6. Fin du chargement de la page. // Déclenchement de load

D'après ces étapes, ready s'exécute après l'étape 4, tandis que load attend la fin de l'étape 6.

Conclusion :

L'événement ready se déclenche dès que l'analyse du DOM est terminée

L'événement load attend que tous les éléments de la page soient chargés, y compris les images et autres ressources externes

Dans une ère de navigateurs rapides, personne ne souhaite attendre. Plus tôt nous manipulons le DOM, mieux c'est. Nous n'avons pas besoin d'atttendre le chargement complet de toutes les ressources pour commmencer à interagir avec notre structure.

Comment jQuery gère-t-il le chargement du document :

Examinons le code source de jQuery :

function terminer(){
      document.removeEventListener('DOMContentLoaded', terminer, false);
     window.removeEventListener('load', terminer, false);
     jQuery.ready(); 
}
jQuery.ready.promesse = function(objet){
      if(!listePrets){
             listePrets = jQuery.Deferred();
             if(document.readyState == "complete"){//moteur webkit, version < 525
                    setTimeout(jQuery.ready);//temporisation pour garantir l'exécution correcte
             }else{//Firefox ou webkit version >= 525
                     document.addEventListener('DOMContentLoaded', terminer, false);
                     window.addEventListener('load', terminer, false)
             }
      }  
      return listePrets.promesse(objet);
}<br></br>

Le mécanisme ready de jQuery est encapsulé dans un système de promesses, une spécialité de jQuery pour unifier les systèmes de rappels.

Implémentation spécifique de jQuery :

1. Pour les moteurs webkit, il utilise la propriété readyState du document. Lorsqu'elle atteint "complete" ou "loaded", le DOM est considéré comme analysé.
2. Pour webkit en version 525 et supérieures, l'événement DOMContentLoaded est directement disponible et enregistré
3. Puisque DOMContentLoaded était à l'origine un événement spécifique à Firefox, adopté ensuite par d'autres navigateurs, il peut être utilisé directement pour Firefox