Deux méthodes pour implémenter une certaine technique js_javascript après le chargement de la page HTML

js :

Copier le code Le code est le suivant :

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

Copier le code Le code est le suivant :

ou son abréviation

Copier le code Le le code est le suivant :

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

Quand le dom se charge Il peut être exécuté dès qu'il est terminé (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 !