Implémentez la méthode js à exécuter après le chargement de la page HTML

Cet article partage principalement avec vous la méthode d'exécution de js après le chargement de la page HTML. Il partage principalement avec vous la méthode du code. J'espère qu'il pourra vous aider.

Méthode Js :

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

Méthode jQuery, vous devez citer le fichier jQuery :

<script type=”text/javascript”>$(document).ready(function (){    var userName=”xiaoming”;
    alert(userName);
});</script>

ou son abréviation :

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

dans DOM Il peut être exécuté après le chargement (avant window.onload). .ready() peut apparaître plusieurs fois dans la même page

La principale différence entre les deux est : Window.onload=function (){} :

Lorsqu'un document est complètement téléchargé sur le navigateur, ce n'est qu'alors que 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(function (){});

sera appelé lorsque le DOM sera complètement prêt et prêt à l'emploi. 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 est exécuté une fois le code HTML téléchargé et analysé dans une arborescence DOM.

Utiliser $(document).ready(function (){}) est généralement préférable à l'utilisation du gestionnaire d'événements onload, mais cela doit être clair, car le fichier de support n'est peut-être pas encore chargé, donc quelque chose comme des propriétés telles que car la hauteur et la largeur de l'image ne sont pas nécessairement valides pour le moment.

Remarque : il y aura des problèmes pour placer js en bas de la page et utiliser defer="defer". Il est préférable d'utiliser la fonction $(document).ready(function (){}).

Recommandations associées :

Introduction à l'accélération du chargement des pages HTML

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!