Quelles ressources externes sont chargées lorsque l'événement window.onload est déclenché et quel est l'ordre de chargement des ressources?

Puisqu'une seule page web peut contenir beaucoup de ressources externes: javascript externe, css externe, images, applets, flash, etc., ma sagesse conventionnelle me dit habituellement que l'événement window.onload est déclenché quand toutes les ressources liées sont terminées le téléchargement (bien que les ressources externes soient généralement téléchargées dans plusieurs threads ou processus par l'implémentation du navigateur). Le cas habituel peut fonctionner la plupart du temps. Mais ... et si la séquence de chargement n'est pas ce que je prends pour acquis, un bug javascript peut se glisser quelque part et parfois. Après avoir fait une recherche, j'ai trouvé que ce n'est pas le cas ce que je pense d'habitude. De cette page: https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html, il semble que les images ne soient pas chargées lors du déclenchement de l'événement onload. Mais d'ici window.onload vs <body onload=""/>, il me semble que les images sont chargées quand onload est déclenché. Il y a plus de confusion pour moi à partir de ce lien http://forums.mozillazine.org/viewtopic.php?f=25&t=413504&start=0&st=0&sk=t&sd=a. Donc, ma première partie de la question est: Est-ce que toutes les ressources sont vraiment chargées quand window.onload est déclenché?Quelles ressources externes sont chargées lorsque l'événement window.onload est déclenché et quel est l'ordre de chargement des ressources?

Une autre partie étroitement liée à la question est: Quelle est l'ordre de chargement des ressources avant le lancement de window.onload? Je sais pour les ressources internes telles que javascript interne ou CSS, l'ordre de chargement est du haut de la page vers le bas (sauf dans IE, utilisez le script différé comme indiqué ici Getting notified when the page DOM has loaded (but before window.onload)). Mais qu'en est-il des ressources externes javascript et css? Par exemple, si je vous écris ma page comme ceci:

<external stylesheet...> 
<external javascript #1...> 
<external javascript #2...> 
<script> 
    ..... 
    window.onload=.... 
    </script>

prenant alors une fonction « javascript externe # 2 » appelle une fonction « javascript externe # 1 », puis-je être sûr qu'il fonctionne toujours? Aussi, si window.onload appelle une fonction dans "javascript externe # 1" fonctionne aussi comme prévu?

Vous pouvez dire que la séquence de chargement des ressources et quand déclencher l'événement window.onload dépend de l'implémentation du navigateur, comme indiqué ici What is the event precedence in JavaScript?. Mais je me demande toujours s'il y a une spécification ou une convention dans le public. Pourriez-vous s'il vous plaît me référer à une ressource ou me dire les faits pour effacer ma confusion?

Source

2009-01-23 jscoot

Les ressources de script sont chargées avant les incendies en charge. Cependant, les imgs se chargent d'une manière asynchrone paresseuse, pas nécessairement dans l'ordre dans lequel ils sont listés dans le document.

J'ai également trouvé au moins sur IE que toutes les propriétés de l'élément DOM ne sont pas correctement calculées au chargement, (par exemple, les tailles client et offset peuvent toujours être 0 lorsqu'elles devraient avoir une valeur).

Source

2009-01-23 17:06:35 AnthonyWJones

Le lien SO que vous avez fourni est un peu trompeur; body onload et window onload appellent tous deux les mêmes événements, mais les événements ne se déclenchent pas en même temps. Window.onload tirera avant body onload de la manière que votre première ressource explique.

Pour des raisons d'interprétation, les navigateurs demandent des ressources javascript en série, où ils peuvent demander tout le reste en parallèle. C'est pourquoi parfois vous allez charger une page, et les images se chargeront dans le désordre, tandis que javascript, sauf la circonstance que vous avez indiqué, se charge dans l'ordre. Alors oui, les ressources seront chargées.

En outre, les navigateurs évaluent d'abord les fonctions js, donc vous ne devriez pas avoir de problème à appeler une fonction avant qu'elle ne soit explicitement définie. Cependant, cela ne fonctionnera pas avec les variables.

Une dernière chose, CSS est interprété de haut en bas; peu importe comment ils sont chargés le navigateur va interpréter les règles en commençant par le haut et en descendant.

Source

2009-01-23 17:20:31 jacobangel

Découvrez Cuzillion. Il a été écrit par Steve Souders de l'équipe de performance de Yahoo pour évaluer exactement ces choses. Ce qui revient à ceci: Les navigateurs chargent les scripts dans l'ordre où ils sont rencontrés dans le document et tout autre chargement est arrêté pendant le téléchargement de chaque script. Les autres ressources (css/images) sont chargées de manière asynchrone et vous ne pouvez pas être certain qu'elles seront complètes. L'événement onload se déclenche lorsque le document et ses ressources script/style/image sont chargés, mais vous ne voulez probablement pas attendre les images si vous faites du javascript lorsque la page est chargée. Au lieu de cela, utilisez quelque chose comme "prêt" événement de jQuery ou déclenchez votre propre événement "DOMReady" en plaçant une balise de script à la fin du corps:

<body> 
    <!-- your page contents here --> 
    <script type="text/javascript"> 
     // DOM is ready, do scripty stuff now 
     DOMReady(); 
    </script> 
</body>

Source

2009-01-23 19:17:59 Prestaul

Quelles ressources externes sont chargées lorsque l'événement window.onload est déclenché et quel est l'ordre de chargement des ressources?

Répondre

Questions connexes