Comment faire exécuter JavaScript après le chargement de la page?

739

J'exécute un script externe, en utilisant un <script>intérieur <head>.

Maintenant, puisque le script s'exécute avant le chargement de la page, je ne peux pas accéder à <body>, entre autres choses. Je voudrais exécuter du JavaScript une fois que le document a été "chargé" (HTML entièrement téléchargé et en RAM). Y a-t-il des événements auxquels je peux me connecter lorsque mon script s'exécute, qui seront déclenchés au chargement de la page?

javascript html dom-events pageload Le flash
la source

Réponses:

839

Ces solutions fonctionneront:

<body onload="script();">

ou

document.onload = function ...

ou même

window.onload = function ...

Notez que la dernière option est une meilleure façon de procéder car elle est discrète et est considérée comme plus standard .

marcgg
la source
5
Quelle est la différence entre <body onload = "script ();"> et document.onload = function ...?
Mentoliptus
11
@mentoliptus: document.onload=est non intrusif en.wikipedia.org/wiki/Unobtrusive_JavaScript
marcgg
3
script en html ... non non non $ (function () {code ici}); <- javascript.js peut être placé dans la tête et se chargera après DOM
21
@gerdi OP n'a rien mentionné sur jQuery. J'ai également donné une option discrète dans ma réponse.
marcgg
1
document.onload n'a pas fonctionné pour moi. J'ai trouvé cet article avec le même problème stackoverflow.com/questions/5135638/… . Il ne semble pas que document.onload soit une option.
spottedmahn
197

Moyen raisonnablement portable et non-framework d'avoir votre script défini une fonction à exécuter au moment du chargement:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}
le chaos
la source
10
+1 pour avoir publié presque exactement ce que je devais trouver il y a 6 mois. Un code comme celui-ci peut être nécessaire si d'autres frameworks et du code sur lesquels vous n'avez aucun contrôle ajoutent des événements de surcharge et que vous souhaitez également sans effacer les autres événements de surcharge. J'ai inclus mon implémentation en tant que fonction et elle nécessitait var newonload = function (evt) {curronload (evt); newOnload (evt); } parce que pour une raison quelconque, le framework que j'utilise nécessite la transmission d'un événement à l'événement onload.
Grant Wagner
6
Je viens de découvrir en testant que le code écrit entraîne le déclenchement des gestionnaires dans un ordre non défini lorsqu'ils sont attachés avec attachEvent (). Si l'exécution de l'ordre du gestionnaire est importante, vous souhaiterez peut-être ignorer la branche window.attachEvent.
Grant Wagner
Donc, cela ajoutera cette fonction en tant que fonction ADDITIONNELLE pour exécuter OnLoad, n'est-ce pas? (plutôt que de remplacer un événement de surcharge existant)
Clay Nichols
@ClayNichols: correct.
chaos
2
Bonne solution, mais désormais obsolète: developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
Renan
192

Gardez à l'esprit que le chargement de la page comporte plusieurs étapes. Btw, c'est du pur JavaScript

"DOMContentLoaded"

Cet événement est déclenché lorsque le document HTML initial a été complètement chargé et analysé , sans attendre la fin du chargement des feuilles de style, des images et des sous-trames. À ce stade, vous pouvez optimiser par programme le chargement des images et des css en fonction de la machine utilisateur ou de la vitesse de la bande passante.

S'exécute après le chargement de DOM (avant img et css): 

document.addEventListener("DOMContentLoaded", function(){
    //....
});

Remarque: JavaScript synchrone interrompt l'analyse du DOM. Si vous souhaitez que le DOM soit analysé le plus rapidement possible après que l'utilisateur a demandé la page, vous pouvez activer votre JavaScript asynchrone et optimiser le chargement des feuilles de style

"charge"

Un événement très différent, la charge , ne doit être utilisé que pour détecter un page entièrement chargée . C'est une erreur incroyablement populaire d'utiliser la charge là où DOMContentLoaded serait beaucoup plus approprié, alors soyez prudent.

Exécute une fois que tout est chargé et analysé: 

window.addEventListener("load", function(){
    // ....
});

Ressources MDN:

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

Liste MDN de tous les événements:

https://developer.mozilla.org/en-US/docs/Web/Events

DevWL
la source
1
@Peter à peu près sûr que cela se tient seul probablement mieux s'il est dans le bas de vos fichiers javascript afin qu'il s'exécute en dernier
arodebaugh
Javascript suspend le rendu du DOM là-bas pour la meilleure façon serait de le placer au bas de la page ou de charger async javascript dans l'en-tête.
DevWL
Ceci est la réponse la plus complète. onload est après, mais les gens ne s'en rendent pas compte au début.
tfont
1
Re javascript asynchrone : pour clarifier, il y a deux choix pour les scripts qui ne s'exécutent pas immédiatement. Parmi ceux-ci, defer est généralement préférable à async - parce que defer n'interrompt pas l'analyse / le rendu html - et lorsqu'il s'exécute, DOM est garanti prêt. Chargez efficacement JavaScript avec defer et async .
ToolmakerSteve
+1 J'ai essayé de window.onload = ...penser que mon script attendrait que tout soit entièrement téléchargé avant de s'exécuter, mais il semble window.onloadse comporter comme document.addEventListener("DOMContentLoaded", ..., alors que le window.addEventListener("load", ...attend vraiment que tout soit entièrement téléchargé. J'aurais pensé que cela window.onloaddevrait être équivalent à window.addEventListener("load", ...plutôt que document.addEventListener("DOMContentLoaded", ...?? J'ai obtenu le même résultat dans Chrome et FF.
wkille
121

Vous pouvez mettre un attribut "onload" à l'intérieur du corps

...<body onload="myFunction()">...

Ou si vous utilisez jQuery, vous pouvez le faire 

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

J'espère que cela répondra à votre question.

Notez que le $ (window) .load s'exécutera après le rendu du document sur votre page.

Nordes
la source
65

Si les scripts sont chargés dans le <head>document, il est possible d'utiliser ledefer attribut dans la balise de script.

Exemple:

<script src="demo_defer.js" defer></script>

De https://developer.mozilla.org :

reporter

Cet attribut booléen est défini pour indiquer à un navigateur que le script est destiné à être exécuté après l'analyse du document, mais avant le lancement de DOMContentLoaded.

Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts en ligne), dans ce cas, il n'aurait aucun effet.

Pour obtenir un effet similaire pour les scripts insérés dynamiquement, utilisez plutôt async = false. Les scripts avec l'attribut defer s'exécuteront dans l'ordre dans lequel ils apparaissent dans le document.

Daniel Price
la source
J'adore cette solution, car je n'ai pas besoin de code javascript, mais je n'ai besoin que d'un attribut html <3
sarkiroka
27

Voici un script basé sur le chargement js différé après le chargement de la page,

<script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.js";
      document.body.appendChild(element);
  }

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

Où dois-je placer cela?

Collez le code dans votre code HTML juste avant la </body>balise (près du bas de votre fichier HTML).

Qu'est ce que ça fait?

Ce code indique d'attendre le chargement de tout le document, puis de charger le fichier externe deferredfunctions.js.

Voici un exemple du code ci-dessus - Différer le rendu de JS

J'ai écrit cela sur la base du chargement différé du concept google pagespeed de javascript et également à partir de cet article Différer le chargement de javascript

Chanceux
la source
21

Regardez le hooking document.onloadou dans jQuery $(document).load(...).

Daniel A. White
la source
Cet événement est-il fiable? (Navigateur croisé .. IE6 + FF2 + etc)
TheFlash
1
Oui, il s'agit d'un DOM standard pour tous les navigateurs.
Daniel A. White
16
C'est en fait window.onload qui est plus standard, pas document.onload. AFAIK
Peter Bailey
11

Fiddle de travail sur<body onload="myFunction()">

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   function myFunction(){
    alert("Page is loaded");
   }
  </script>
 </head>

 <body onload="myFunction()">
  <h1>Hello World!</h1>
 </body>    
</html>
Aamir Shahzad
la source
10 
<script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

Frankey
la source
7

Je trouve parfois sur des pages plus complexes que tous les éléments n'ont pas été chargés par la fenêtre de temps. Si c'est le cas, ajoutez setTimeout avant que votre fonction de délai soit un instant. Ce n'est pas élégant mais c'est un simple hack qui rend bien.

window.onload = function(){ doSomethingCool(); };

devient...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Charles Jaimet
la source
5

Il suffit de définir <body onload="aFunction()">cela sera appelé après le chargement de la page. Votre code dans le script est alors entouré de aFunction() { }.

Norbert Hartl
la source
4 
<body onload="myFunction()">

Ce code fonctionne bien.

Mais la window.onloadméthode a différentes dépendances. Cela peut donc ne pas fonctionner tout le temps.

Akarsh Satija
la source
3

Utilisation de la bibliothèque YUI (je l'adore):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

Portable et beau! Cependant, si vous n'utilisez pas YUI pour d'autres choses (voir son doc), je dirais que cela ne vaut pas la peine de l'utiliser.

NB: pour utiliser ce code vous devez importer 2 scripts

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>
Valentin Jacquemin
la source
3

Il existe une très bonne documentation sur la façon de détecter si le document a été chargé aide de Javascript ou de Jquery.

En utilisant le Javascript natif, cela peut être réalisé

if (document.readyState === "complete") {
 init();
 }

Cela peut également être fait à l'intérieur de l'intervalle

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

Par exemple, par Mozilla

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

Utilisation de Jquery Pour vérifier uniquement si DOM est prêt

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

Pour vérifier si toutes les ressources sont chargées, utilisez window.load

 $( window ).load(function() {
        console.log( "window loaded" );
    });

la source
3

Utilisez ce code avec la bibliothèque jQuery, cela fonctionnerait parfaitement.

$(window).bind("load", function() { 

  // your javascript event

});
Harish Kumar
la source
Ajoutez une description ici
Mathews Sunny
3 
$(window).on("load", function(){ ... });

.ready () fonctionne mieux pour moi.

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

.load () fonctionnera, mais il n'attendra pas que la page soit chargée.

jQuery(window).load(function () { ... });

Ne fonctionne pas pour moi, brise le script en ligne suivant. J'utilise également jQuery 3.2.1 avec d'autres fourches jQuery.

Pour masquer la superposition de chargement de mes sites Web, j'utilise les éléments suivants:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
Zach Reynolds
la source
3

Javascript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

idem pour jQuery:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});




REMARQUE: - N'utilisez pas le balisage ci-dessous (car il écrase les autres déclarations de même type):

document.onreadystatechange = ...
T.Todua
la source
1

Comme Daniel le dit, vous pouvez utiliser document.onload.

Les différents frameworks javascript hwoever (jQuery, Mootools, etc.) utilisent un événement personnalisé «domready», qui, je suppose, doit être plus efficace. Si vous développez avec javascript, je vous recommande fortement d'exploiter un framework, ils augmentent massivement votre productivité.

Iain
la source
1 

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>
Développer l'extrait

Vô Vị
la source
4
Cette réponse dépend de jquery
Chiptus
0

Mon conseil utilise l' asnycattribut pour la balise de script qui vous aide à charger les scripts externes après le chargement de la page

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
Kalidass
la source
7
Selon w3schools , si async est présent: Le script est exécuté de manière asynchrone avec le reste de la page (le script sera exécuté pendant que la page continue l'analyse) . Peut-être vouliez-vous deferplutôt dire , comme l'a mentionné @Daniel Price?
jk7
0

utiliser la fonction onload d'auto-exécution

window.onload = function (){
    /* statements */
}();
user7087840
la source
2
Vous pouvez remplacer d'autres onloadgestionnaires en utilisant cette approche. Au lieu de cela, vous devez ajouter un écouteur.
Leonid Dashko