Différence en jQuery ready et load

En jQuery, on utilise souvent 2 handler pour réagir aux événements document ready et window load :

// document ready
jQuery(document).ready(function($){
	alert('Le chargement du DOM est terminé');
});

// window load
jQuery(window).load(function(){
	alert('Le chargement de la page web est terminé');
});

La différence entre ces deux événements est subtile, mais il est très utile de la connaître :

Document ready

Cet événement survient en premier, il se déclenche lorsque le parser HTML du navigateur a terminé de construire le DOM (structure HTML) à partir du code source de la page.

Par contre cela ne veut pas dire que le chargement de la page est terminé, il reste par exemple les images à charger, et potentiellement d'autres ressources comme les feuilles de style CSS.

Voici un billet similaire qui vous permettera d'en savoir plus sur texte oblique sur excel.

On l'utilise très souvent, car le chargement du DOM est bien souvent un prérequis, pour du code Javascript qui manipule la page web (style plugin slideshow, diaporama, animations diverses, tracking AJAX...).

Window load

L'événement window load (aussi appelé onload) se produit lorsque le chargement de la page web est terminé, entièrement terminé. C'est-à-dire que toutes les ressources externes qu'elle contient sont chargées : les images, les animations flash et les CSS par exemple.

On l'utilise dans certains cas, lorsque le document ready ne convient pas, ce qui est le cas par exemple pour un bout de code Javascript qui effectue un traitement lié aux balises <img>.

Allez donc jeter un oeil sur cette page : damier & perspective.