web-dev-qa-db-ja.com

ページロード後に実行されるJavaScript

私は<script>の中に<head>を使って外部スクリプトを実行しています。

スクリプトが before を実行してからページが読み込まれるようになったので、とりわけ<body>にアクセスできません。ドキュメントが「ロード」された（HTMLが完全にダウンロードされ、RAMに格納された）後にJavaScriptを実行したいのですが。スクリプトの実行時にフックできるイベントはありますか。それらはページの読み込み時に発生しますか？

javascripthtmljavascript-eventspageload
605
Robinicks

これらの解決策はうまくいくでしょう：

<body onload="script();">

または

document.onload = function ...

あるいは

window.onload = function ...

最後のオプションは にすることをお勧めします - 邪魔にならない そして はより標準的なものと見なされます .

693
marcgg

スクリプトにロード時に実行する関数を設定させるための、移植性が高く、フレームワークを使用しない方法です。

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;
    }
}
184
chaos

ページの読み込みには複数の段階があります。ところで、これは純粋なJavaScriptです

"DOMContentLoaded"

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

DOMがロードされた後（imgと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/DOMContentLoadedhttps://developer.mozilla.org/en-US/docs/Web/Events/load

全イベントのMDNリスト：

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

111
DevWL

あなたはボディの中に "onload"属性を置くことができます

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

あるいはjQueryを使っているのなら、

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

or 

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

あなたの質問にお答えください。

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

111
Nordes

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

例： 

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

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

延期

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

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

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

49
Daniel Price

これは、ページがロードされた後にロードされる遅延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 conceptに基づいて書き、またこの記事から引用しました 読み込みを遅らせる

24
Lucky

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

20
Daniel A. White

Working Fiddle

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

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>    
</html>
6
Aamir Shahzad
document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

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

6
Arthur

Googleでも推奨されている最善の方法。 :)

<script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.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>

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

6
Frankey

あなたがjQueryを使っているなら、

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

と同等です

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

参照 JQuery $ function（）はどのイベントを起動しますか？

5
Benjamin Crouzier

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

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

〜になる.

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
4
Charles Jaimet
<body onload="myFunction()">

このコードはうまくいきます。

しかしwindow.onloadメソッドにはさまざまな依存関係があります。だからそれはいつもうまくいくとは限らない。

4
Akarsh Satija

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

4
Norbert Hartl

$（ウィンドウ）.on（ "load"、function（）{...}）;

.ready（） は私に最適です。

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

.load（） は動作しますが、ページがロードされるまで待機しません。

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

私にとってはうまくいきません。次のインラインスクリプトを壊します。私はまたjQuery 3.2.1を他のjQueryフォークと一緒に使っています。

Webサイトのオーバーレイを表示しないようにするには、次のようにします。

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
4
Zach Reynolds

YUIライブラリを使う （私は大好きです）：

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

ポータブルで美しい！しかし、あなたが他のものにYUIを使わないのなら（その文書を見てください）、私はそれを使う価値がないと言うでしょう。

N.B. ：このコードを使うには、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>
3
Valentin Jacquemin

How to ドキュメントがロードされたかどうかを検出する方法 JavascriptまたはJqueryを使った非常に良いドキュメントがあります。

ネイティブのJavaScriptを使用してこれを達成することができます

if (document.readyState === "complete") {
 init();
 }

これは区間内でも実行できます。

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

例えば、Mozillaによる

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

Jqueryを使うDOMの準備ができているかどうかだけを調べる

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

すべてのリソースがロードされているかどうかを確認するには、window.loadを使用してください。

 $( window ).load(function() {
        console.log( "window loaded" );
    });
3
user5642061

JQueryライブラリでこのコードを使用してください、これは完全にうまくいきます。

$(window).bind("load", function() { 

  // your javascript event

});
2
Harish Kumar
<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>
1
Vô Vị

スクリプトタグにasnyc属性を使用すると、ページロード後に外部スクリプトをロードするのに役立ちます。

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
1
Kalidass

Danielが言っているように、document.onloadを使うことができます。

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

1
Iain

自己実行onload関数を使う

window.onload = function (){
    /* statements */
}();
0
user7087840