Dans ce post, nous allons voir comment exécuter du code JavaScript après le chargement de la page en utilisant JS pur et jQuery.
La bibliothèque JavaScript et jQuery offre plusieurs façons d’exécuter une fonction après que le DOM soit prêt. Ce post fournit un aperçu détaillé des méthodes pour accomplir cela.
JavaScript
En JavaScript pur, la méthode standard pour détecter une page entièrement chargée est d’utiliser la propriété du gestionnaire d’événement onload. L’événement load indique que tous les actifs de la page web ont été chargés. Il peut être appelé avec la window.onload en JavaScript.
|
1
2
3
|
window.onload = function() {
alert(‘Page is loaded’) ;
} ;
|
Editer en JSFiddle
Le code suivant utilise la méthode addEventListener() pour écouter l’événement load afin de détecter une page entièrement chargée. Ceci est équivalent au code ci-dessus.
|
1
2
3
|
window.addEventListener(« load », function() {
alert(‘Page is loaded’) ;
}) ;
|
Edit in JSFiddle
Bien que non recommandé, vous pouvez également appeler une fonction JavaScript au chargement de la page en utilisant la balise HTML <body>. L’idée est d’utiliser l’attribut onload dans la balise body.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload= »loaded() ; » ></body>
<script>
function loaded() {
alert(‘Page is loaded’) ;
}.
</script>
</html>
|
Editer en JSFiddle
Notez, que l’événement DOMContentLoaded serait plus approprié si vous avez juste besoin que votre code s’exécute lorsque le DOM est entièrement chargé, sans attendre que les feuilles de style et les images aient fini de se charger.
|
1
2
3
|
document.addEventListener(« DOMContentLoaded », function() {
alert(‘Page is loaded’) ;
}) ;
|
Editer en JSFiddle
jQuery
Avec jQuery, vous pouvez exécuter du code JavaScript dès que le DOM est entièrement chargé en utilisant la méthode .ready() qui est équivalente à window.onload en JavaScript. On peut utiliser n’importe laquelle des syntaxes suivantes, qui sont toutes identiques :
- $(document).ready(handler)
- $(« document »).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(document).ready(function() {
alert(‘Page is loaded’) ;
}) ;
|
Editer en JSFiddle
Alternativement, on peut appeler $(handler) qui est équivalent à la syntaxe ci-dessus :
|
1
2
3
|
$(function() {
alert(‘Page is loaded’) ;
}) ;
|
Editer en JSFiddle
Vous pouvez également surveiller l’événement load sur l’objet window en utilisant la méthode $(window).on("load", handler).
|
1
2
3
|
$(window).bind(‘load’, function() {
alert(‘Page is loaded’) ;
}) ;
|
Editer en JSFiddle
.