934

<script>insideを使用して、外部スクリプトを実行してい<head>ます。

ページが読み込まれる前にスクリプトが実行されるため<body>、とりわけ にアクセスできません。ドキュメントが「読み込まれた」(HTML が完全にダウンロードされ、RAM 内にある) 後に JavaScript を実行したいと考えています。スクリプトの実行時にフックできる、ページの読み込み時にトリガーされるイベントはありますか?

4

26 に答える 26

1053

これらのソリューションは機能します：

コメントで述べたように、deferを使用します。

<script src="deferMe.js" defer></script>

また

<body onload="script();">

また

document.onload = function ...

あるいは

window.onload = function ...

最後のオプションは目立たず、より標準的と見なされるため、より良い方法であることに注意してください。

于 2009-04-30T16:41:16.300 に答える
361

ページの読み込みには複数の段階があることに注意してください。ところで、これは純粋な JavaScript です

"DOMContentLoaded"

このイベントは、スタイル シート、画像、およびサブフレームの読み込みが完了するのを待たずに、最初の HTML ドキュメントの読み込みと解析が完了すると発生します。この段階で、ユーザーのデバイスまたは帯域幅の速度に基づいて、画像と CSS の読み込みをプログラムで最適化できます。

DOM がロードされた後 (画像と CSS の前) に実行されます。

document.addEventListener("DOMContentLoaded", function(){
    //....
});

注: 同期 JavaScript は DOM の解析を一時停止します。ユーザーがページをリクエストした後、できるだけ早く DOM を解析したい場合は、JavaScript を非同期にして、スタイル シートの読み込みを最適化できます。

"ロード"

非常に異なるイベントであるloadは、ページが完全に読み込まれたことを検出するためにのみ使用する必要があります。DOMContentLoaded の方が適切な場所で load を使用するのは非常によくある間違いなので、注意してください。

すべてがロードおよび解析された後に実行されます。

window.addEventListener("load", function(){
    // ....
});

MDN リソース:

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

すべてのイベントの MDN リスト:

https://developer.mozilla.org/en-US/docs/Web/Events

于 2016-03-19T00:50:30.190 に答える
207

スクリプトにロード時に実行する関数を設定させる、適度に移植性のある、フレームワークではない方法：

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}
于 2009-04-30T16:59:58.797 に答える
135

ボディ内に「onload」属性を入れることができます

...<body onload="myFunction()">...

または、jQueryを使用している場合は、次のことができます

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

あなたの質問に答えてくれることを願っています。

$(window).load は、ドキュメントがページにレンダリングされた後に実行されることに注意してください。

于 2009-04-30T16:42:29.370 に答える
78

<head>スクリプトがドキュメント内にロードされている場合はdefer、script タグで属性を使用できます。

例：

<script src="demo_defer.js" defer></script>

https://developer.mozilla.orgから:

延期する

このブール属性は、ドキュメントが解析された後、DOMContentLoaded を起動する前にスクリプトが実行されることをブラウザに示すために設定されます。

src 属性が存在しない場合 (つまり、インライン スクリプトの場合) は、この属性を使用してはなりません。この場合、効果はありません。

動的に挿入されたスクリプトで同様の効果を得るには、代わりに async=false を使用します。defer 属性を持つスクリプトは、ドキュメントに表示される順序で実行されます。

于 2014-01-10T08:52:41.803 に答える
33

これは、ページが読み込まれた後に遅延された js 読み込みに基づくスクリプトです。

<script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

これはどこに置くのですか？

</body>HTML のタグの直前 (HTML ファイルの下部近く) にコードを貼り付けます。

それは何をするためのものか？

このコードは、ドキュメント全体が読み込まれるのを待ってから、外部ファイルを読み込むことを示していますdeferredfunctions.js。

上記のコードの例を次に示します - JS のレンダリングを延期する

これは、javascript pagespeed google の概念の遅延読み込みに基づいて作成し、この記事のDefer loading javascriptからも引用しています

于 2013-02-05T12:40:15.160 に答える
22

フックdocument.onloadまたは jQueryを見てください$(document).load(...)。

于 2009-04-30T16:40:17.847 に答える
11

作業中の<body onload="myFunction()">

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   function myFunction(){
    alert("Page is loaded");
   }
  </script>
 </head>

 <body onload="myFunction()">
  <h1>Hello World!</h1>
 </body>    
</html>
于 2013-03-26T09:39:35.327 に答える
9

jQueryを使用している場合は、

$(function() {...});

と同等です

$(document).ready(function () { })

または別の略記:

$().ready(function () { })

JQuery $function() が起動するイベントは何ですか?を参照してください。およびhttps://api.jquery.com/ready/

于 2013-03-06T20:39:46.337 に答える
9

より複雑なページでは、window.onload が起動されるまでにすべての要素がロードされていないことがあります。その場合は、遅延させる関数の前に setTimeout を追加してください。エレガントではありませんが、うまくレンダリングできる単純なハックです。

window.onload = function(){ doSomethingCool(); };

なる...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
于 2013-07-20T21:13:54.907 に答える
7 
document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

ここを見てください：http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx

于 2014-09-11T11:41:40.550 に答える
6

<body onload="aFunction()">ページが読み込まれた後に呼び出されるように定義するだけです。スクリプト内のコードは で囲まれていaFunction() { }ます。

于 2009-04-30T16:41:05.957 に答える
3 
$(window).on("load", function(){ ... });

.ready()は私に最適です。

$(document).ready(function(){ ... });

.load()は機能しますが、ページが読み込まれるまで待機しません。

jQuery(window).load(function () { ... });

私にはうまくいきません。次のインラインスクリプトが壊れます。また、jQuery 3.2.1 と他の jQuery フォークも使用しています。

ウェブサイトの読み込みオーバーレイを非表示にするには、次を使用します。

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
于 2018-03-08T02:42:57.043 に答える
2

特定のスクリプト ファイルに関数を記述し、onload 属性を使用して body 要素に呼び出すことができます。

例:

<script>
  afterPageLoad() {
   //your code here
}
</script>

script タグを使用して、HTML ページにスクリプトを呼び出します。

<script src="afterload.js"></script>

あなたの体の要素に; 次のように onload 属性を追加します。

<body onload="afterPageLoad();">
于 2021-04-02T08:16:11.947 に答える
1

YUI ライブラリの使用(大好きです):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

ポータブルで美しい！ただし、他の目的で YUI を使用しない場合 (ドキュメントを参照)、使用する価値はないと言えます。

注意: このコードを使用するには、2 つのスクリプトをインポートする必要があります

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>
于 2009-04-30T17:36:51.377 に答える
1

ダニエルが言うように、document.onload を使用できます。

さまざまな javascript フレームワーク (jQuery、Mootools など) は、カスタム イベント 'domready' を使用しますが、これはより効果的であると思います。JavaScript を使用して開発している場合は、フレームワークを利用することを強くお勧めします。フレームワークを使用すると、生産性が大幅に向上します。

于 2009-04-30T16:47:28.233 に答える
0

asnycページの読み込み後に外部スクリプトを読み込むのに役立つスクリプトタグの属性を使用することをお勧めします

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
于 2015-03-30T05:43:37.123 に答える
0

このコードでページの読み込みをキャッチできます

<script>
console.log("logger saber");

window.onload = (event) => {
  console.log('page is fully loaded');
document.getElementById("tafahomNameId_78ec7c44-beab-40de-9326-095f474519f4_$LookupField").value = 1;;
};

</script>
于 2021-03-30T10:43:53.977 に答える
0 

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>

于 2015-09-29T08:43:45.973 に答える