recherche

Maison  >  Article  >  interface Web  >  Quelle est la différence entre onload et load en JavaScript ?

Quelle est la différence entre onload et load en JavaScript ?

青灯夜游
青灯夜游original
2020-12-14 10:06:243814parcourir

Différence : load indique uniquement la méthode événementielle, mais n'est pas exécuté ; onload indique qu'elle sera exécutée une fois que tout ce qui se trouve sur la page est chargé. Une seule fonction onload est autorisée à apparaître sur la page, car elle est uniquement autorisée. a une fonction programmable. onload peut être exécuté avant le chargement de certains éléments, et load sera exécuté après le chargement de tous les éléments.

Quelle est la différence entre onload et load en JavaScript ?

Recommandations associées : "Tutoriel vidéo jQuery"

Lors de l'écriture d'interactions, si la fonction de chargement doit être en charge ou charger du drap de laine ?

Profitez-en pour l’organiser pour ne pas l’oublier ! !

window.onload(function) en js est équivalent à $(window).onload(function) en jquery

1 : window.load indique uniquement la méthode événementielle, mais elle n'est pas exécutée . Par exemple, survoler et cliquer représentent des événements. Vous devez utiliser survol et onclick pour exécuter

Lorsque la page est chargée et rendue, il y a généralement un effet de chargement. Vous pouvez l'utiliser à ce moment :

.

JS : 

              $(window).load(function(){
                $(".loadingicon").addClass("loader-chanage");
                $(".loadingicon").fadeOut(300,function(){
                  $(".loadingicon").remove();
                  $(".maker").show().animate({"right":"0"},500);
                });
              })

$(window).load(function) Les images et autres ressources de la page ne seront exécutées qu'après leur chargement

2 : window ; .onload signifie que le chargement est terminé. Tout sur la page n'est exécuté qu'une fois que tout est exécuté. Une seule fonction onload est autorisée à apparaître sur la page, car elle n'a qu'une seule fonction programmable :

JS : 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>demo float</title>
        
    </head>
    <body>
        <script type="text/javascript">
            window.onload = function(){   alert("这是1");};
            window.onload = function(){   alert("这是2");};
        </script>
    </body>
</html>

Résultat de l'exécution :

Trois : Après avoir parlé de ce qui précède, il y a aussi la fonction $(document).ready(function) de Jquery, qui est exécutée après tout les structures DOM de la page Web sont dessinées. Peut-être que le contenu associé à l'élément DOM n'a pas été chargé, comme les images et les paramètres de hauteur et de largeur associés, etc. À ce stade, vous pouvez envisager la méthode de chargement dans jquery pour éviter. de plus, $(document).ready(function) peut écrire des fonctions illimitées, telles que : 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>demo float</title>
        <script type="text/javascript" src="http://static.ruilife.net/static/js/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function(){     console.log("这是1");});
            $(document).ready(function(){     console.log("这是2");});
        </script>
    </body>
</html>

Résultats d'exécution :


4. document

document.write(_LoadingHtml);
      
      //监听加载状态改变
      document.onreadystatechange = completeLoading;
       
      //加载状态为complete时移除loading效果
      function completeLoading() {
          if (document.readyState == "complete") {
              var loadingMask = document.getElementById('loadingp');
              loadingMask.parentNode.removeChild(loadingMask);
          }
      }

Enfin, pour résumer :

La fonction est exécutée dès l'exécution de la page js:window.onload, lors de l'exécution de cette fonction, les images de la page peuvent. pas encore chargé !

jquery : $(window).load() Une fois les images ou autres éléments de la page chargés, exécutez cette fonction.

Le format complet d'appel de la méthode de chargement est : load( url, [data], [callback] ) paramètres respectivement adresse url, type de fichier (php, html, etc.), fonction de rappel, chargement du sélecteur ( est également pris en charge "test.html #content id name")

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Qu’est-ce que le curseur dans jquery ?Article suivant：Qu’est-ce que le curseur dans jquery ?

Articles Liés

Voir plus