JavaScriptのonloadとloadの違いは何ですか?-フロントエンドQ&A-php.cn

JavaScriptのonloadとloadの違いは何ですか?

青灯夜游

リリース： 2023-01-04 09:37:08

オリジナル

3799 人が閲覧しました

違い:load はイベントメソッドを示すだけで、実行されません。onload は、ページ上のすべてをロードした後に実行されることを示します。onload 関数は 1 つしかないため、ページに表示できるのは 1 つだけですプログラマブル機能。 onload は一部の要素がロードされる前に実行される場合があり、load はすべての要素がロードされた後に実行されます。

JavaScriptのonloadとloadの違いは何ですか?

関連する推奨事項: 「jQuery ビデオチュートリアル」

インタラクションを作成する場合、読み込み関数を onload にするか、onload にするかウールの布をロードしますか？

忘れないようにこの機会に整理してください。！

js の window.onload(function) は、jquery の $(window).onload(function) と同等です。

1: window.load はイベントメソッドを示すだけで、実行されません。たとえば、hover と click はイベントを表し、hover と onclick はそれらが実行される前に使用する必要があります。

通常、ページが読み込まれてレンダリングされるときに読み込み効果があり、この時点でそれを使用できます。時間:

JS:

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

ログイン後にコピー

$(window).load(function) ページ内の画像およびその他のリソースは、ロードされるまで実行されません。

2: window.onload は、読み込みが完了したことを意味します。ページ上のすべては、すべてが実行された後にのみ実行されます。プログラム可能な関数は 1 つだけであるため、ページ上に表示できる onload 関数は 1 つだけです:

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>

ログイン後にコピー

実行結果:

Three: 上記の話をした後、別の Jquery $(document).ready(function) があります。これは、Web ページ内のすべての DOM 構造が描画された後に実行されます。おそらく、DOM 要素に関連付けられたコンテンツ (画像や関連する高さと幅の設定など) が読み込まれていない可能性があります。この時点で、負荷を考慮することができます。これを回避するには、jquery のメソッドを使用します。さらに、$(document).ready(function) は、次のような関数を無制限に作成できます:

<!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>

ログイン後にコピー

実行結果:

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);
          }
      }

ログイン後にコピー

最後にまとめると:

js: この関数は window.onload ページが実行されるとすぐに実行されます。この関数を実行すると、画像がページ内はまだ読み込まれていない可能性があります。

jquery: この関数は、$(window).load() ページ内の画像またはその他のものがロードされた後に実行されます。

load メソッドを呼び出す完全な形式は次のとおりです:load(url, [data], [callback]) パラメータはそれぞれ URL アドレス、ファイルタイプ (php、html など)、コールバック関数、およびセレクターの読み込みもサポートしていますload( "test.html #content id name")

プログラミング関連の知識の詳細については、プログラミング教育をご覧ください。！

以上がJavaScriptのonloadとloadの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。