Question JavaScript qui s'exécute après le chargement de la page


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

Maintenant que le script s'exécute avant la page a chargé, je ne peux pas accéder au <body>, entre autres. Je voudrais exécuter du JavaScript après que le document a été "chargé" (HTML entièrement téléchargé et en-RAM). Y a-t-il des événements sur lesquels je peux m'accrocher lorsque mon script s'exécute, qui se déclenchera au chargement de la page?


524
2018-04-30 16:38


origine


Réponses:


Ces solutions fonctionneront:

<body onload="script();">

ou

document.onload = function ...

ou même

window.onload = function ...

Notez que la dernière option est la meilleure solution puisque c'est discret et est considéré plus standard.


600
2018-04-30 16:41



Raisonnablement portable, la façon non-framework d'avoir votre script définir 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;
    }
}

172
2018-04-30 16:59



Vous pouvez mettre un attribut "onload" dans le 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 $ (window) .load s'exécutera après que le document est rendu sur votre page.


108
2018-04-30 16:42



Gardez à l'esprit que le chargement de la page comporte plus d'une étape. Btw, c'est du JavaScript pur

"DOMContentLoaded"

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

Exectes après le chargement de DOM (avant img et css):

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

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

"charge"

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

Exectues après 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

MDN liste de tous les événements:

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


72
2018-03-19 00:50



Si les scripts sont chargés dans le <head> du document, alors il est possible d'utiliser le defer attribut dans la balise 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 censé être exécuté après que le document a été analysé, mais avant   tir DOMContentLoaded.

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

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


44
2018-01-10 08:52



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ù est-ce que je place ceci?

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

Qu'est ce que ça fait?

Ce code dit attendre le chargement complet du document, puis charger le    fichier externe deferredfunctions.js.

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

J'ai écrit ceci basé sur chargement reporté de javascript pagespeed google concept et également provenant de cet article Reporter le chargement de javascript


22
2018-02-05 12:40



Regardez l'accrochage document.onload ou en jQuery $(document).load(...).


20
2018-04-30 16:40



Meilleure méthode, recommandée par Google aussi. :)

<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


6
2017-09-11 19:23



Violon de travail

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

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>    
</html>

6
2018-03-26 09:39