Événements et séquence déclenchés lors du chargement de la page

Avant-propos

Une fois la page chargée, elle peut être grossièrement divisée en les étapes suivantes :

1. Commencez à analyser la structure du document HTML

2. Chargement de feuilles de style externes et de scripts JavaScript

3. Analyse et exécution de scripts JavaScript

4. Rendu de l'arborescence DOM terminé

5. Chargement de ressources externes inachevées (telles que des images)

6. Page chargée avec succès

Alors, qu'est-ce qui a été déclenché dans tout le processusQu'en est-il des événements couramment utilisés ?

événement document readystatechange

　readyState l'attribut décrit l'état de chargement du document.readyState continuera à changer pendant tout le processus de chargement, et chaque changement déclenchera le. événement readystatechange.

　readyState a le statut suivant :

　 Loading / Loading document est toujours en cours de chargement.

Interactif / Le chargement du document interactif est terminé et le document a été analysé, mais les sous-ressources telles que les images, les feuilles de style et les cadres sont toujours en cours de chargement.

Le document T complet/complet et toutes les sous-ressources ont été chargées. Le statut indique que l'événement load est sur le point d'être déclenché.

Par exemple, s'il correspond à interactif à l'étape 2 et à terminer après l'étape 5, l'événement readystatechange sera déclenché.

PS : readyState et XMLHttpRequest.readyState lors du chargement de documents, d'images, etc. sont différents. Faites attention à la distinction entre

événement DOMContentLoaded du document

L'événement DOMContentLoaded est déclenché lorsque le rendu de l'arborescence DOM est terminé et des ressources externes peuvent encore être en cours de chargement à ce moment-là. L'événement ready dans jquery a le même effet

événement de chargement de fenêtre

Lorsque toutes les ressources sont chargées, l'événement de chargement de la fenêtre sera déclenché.

L'événement de chargement de document ne peut pas être déclenché, mais il existe cet événement sur MDN ? Demandez à Dieu de vous guider ! ! !

Instance

  <h1>测试页面加载时，事件触发次序</h1>
  <img src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt="">
  <h1>测试页面加载时，事件触发次序</h1>
  <img src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg" alt="">
  <h1>测试页面加载时，事件触发次序</h1>
  <script type="text/javascript">
    console.log(&#39;resolve body JavaScript&#39;);
   
    window.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;window load&#39;);
    })

    document.addEventListener(&#39;readystatechange&#39;,function(){
      console.log(&#39;document &#39; + document.readyState);
    })

    document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
      console.log(&#39;document DOMContentLoaded&#39;);
    })    //document 没有load事件??    document.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;document load&#39;);
    })  </script>

La sortie du journal dans Chrome est la suivante :

résoudre le corps JavaScript --> - > document DOMContentLoaded --> document terminé --> chargement de la fenêtre

Exactement comme prévu. Par conséquent, les scripts qui nécessitent uniquement que la structure du document soit chargée avant de pouvoir être exécutés peuvent surveiller DOMContentLoaded ; les scripts qui nécessitent que tout le contenu soit chargé avant de pouvoir être exécutés doivent surveiller window.onload ou document.readyState === 'complete'. ​

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!