Deux méthodes pour exécuter un js après le chargement de la page HTML

Cet article présente principalement deux méthodes pour exécuter un certain js après le chargement de la page HTML. Les amis qui en ont besoin peuvent se référer à la méthode

js :

. Copier le codeLe code est le suivant :

<script type="text/javascript"> 
window.onload=function(){ 
var userName="xiaoming"; 
alert(userName); 
} 
</script>

Ce qui suit est la méthode jQuery, qui doit référencer le fichier jQuery.

Copier le code Le code est le suivant :

<script type="text/javascript"> 

$(document).ready(function(){ 

var userName="xiaoming"; 

alert(userName); 
}); 

</script>

ou son abréviation

Copier le code

🎜> Code comme suit :

$(function(){ 
var userName="xiaoming"; 
alert(userName); 
});

Il peut être exécuté lorsque le dom est chargé (avant window.onload). .ready() peut apparaître plusieurs fois dans la même page

PS : La principale différence entre les deux

window.onload :

Quand un document est complètement téléchargé sur le navigateur, l'événement window.onload sera déclenché. Cela signifie que tous les éléments de la page sont exploitables pour js, ce qui signifie que tous les éléments de la page ne seront pas exécutés tant qu'ils ne seront pas chargés. Cette situation est très avantageuse pour écrire du code fonctionnel car il n’y a pas besoin de considérer l’ordre de chargement. ,

$(document).ready{ } :

sera appelé lorsque le DOM sera complètement prêt et prêt à être utilisé. Si cela signifie également que tous les éléments sont accessibles au script, cela ne signifie pas que tous les fichiers associés ont été téléchargés. En d’autres termes, le code sera exécuté une fois le HMTL téléchargé et analysé dans une arborescence DOM.

Donnez un exemple :

Supposons qu'il existe une page qui représente une galerie. Cette page peut contenir de nombreuses images volumineuses. Nous pouvons masquer, afficher ou manipuler ces images via jQuery. Si l'on configure l'interface via la page de chargement, l'utilisateur doit attendre que chaque image soit téléchargée avant de pouvoir utiliser cette page. Pire encore, si le comportement est légèrement ajouté aux éléments qui ont un comportement par défaut (tels que les liens), l'interaction de l'utilisateur peut conduire à des résultats inattendus. Cependant, lorsque nous essayons $(document).ready(){ } de le configurer, l'interface sera prête avec un comportement correct plus tôt.

Utiliser $(document).ready(){ } est généralement mieux que d'essayer le gestionnaire d'événements onload, mais il doit être clair que parce que le fichier de support n'est peut-être pas encore terminé, donc quelque chose comme des propriétés telles que l'image la hauteur et la largeur ne sont pas nécessairement valables pour le moment.

Remarque : il y aura des problèmes pour placer js en bas de la page et utiliser defer="defer". Mieux vaut utiliser la fonction ci-dessus !

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!