ページの読み込み完了後に関数を実行する

121

次のコードを使用して、ページの読み込み後にいくつかのステートメントを実行しています。

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

しかし、このコードは正しく機能しません。一部の画像や要素が読み込まれている場合でも、この関数が呼び出されます。私が欲しいのは、ページが完全に読み込まれた関数を呼び出すことです。

javascript  html  image 
— ニーラジクマール
ソース
1
JSFiddle.netにデモを追加できますか？
— 一部のガイ
2
jQueryを使用できますか？もしそうなら、お試しください$(window).load()
— Matt Hintzke
はい、何が適切に機能していないのか正確に説明できますか？エラーが発生していますか、それともalertウィンドウが再描画される前に関数を呼び出していますか（ロード前に呼び出されたように見えます）？コードは正常に見え、ユーザーに大きなライブラリをダウンロードするように強制しても、おそらくこの問題は修正されず、診断も容易になりません。
— ジェフリースウィーニー
— Jeffrey Sweeney
機能していないと言うと、一部の画像が読み込まれている場合でも、関数が実行されることを意味します。
— Neeraj Kumar

回答:

166

これはあなたのために働くかもしれません：

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

またはjqueryに慣れている場合は、

$(document).ready(function(){
// your code
});

$(document).ready()DOMContentLoadedで発生しますが、このイベントはブラウザ間で一貫して発生していません。これがjQueryがすべてのブラウザーをサポートするための重い回避策を実装する可能性が最も高い理由です。これにより、プレーンなJavascriptを使用して動作を「正確に」シミュレートすることが非常に困難になります（もちろん不可能ではありません）。

Jeffrey SweeneyとJ Torresが示唆したsetTimeoutように、以下のような関数を実行する前に、関数を持っている方がよいと思います。

setTimeout(function(){
 //your code here
}, 3000);
— シュリードハー
ソース
12
jQuery readyは、OPが要求したことを行いません。ready要素が読み込まれた後ではなく、DOMが読み込まれたときに発生します。load要素の読み込み/レンダリングが完了した後に発生します。
— Jaime Torres
OPはHTMLだけでなく、すべての要素を完全にロードする必要があるようです。
— ジェフリースウィーニー
3
@shreedharまたは彼は仕事に適したツールを使用できます（load）。
— Jaime Torres
14
setTimeout悪い考えです。3秒（または選択した値によってはn秒）未満のページの読み込みに依存します。読み込みに時間がかかる場合は機能しません。また、ページの読み込みが速い場合は、理由もなく待機する必要があります。
— JJJ 2016
1
@ChristianMatthewそのuseCapture trueの場合、useCaptureは、ユーザがキャプチャを開始したいことを示しています。キャプチャを開始した後、指定されたタイプのすべてのイベントは、DOMツリー内のその下のEventTargetsにディスパッチされる前に、登録されたリスナーにディスパッチされます。ツリーを上に向かってバブルしているイベントは、キャプチャを使用するように指定されたリスナーをトリガーしません。詳細な説明については、DOMレベル3イベントを参照してください。
— Shreedhar
52

JavaScript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

jQueryについても同じです。

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});




注： -以下のマークアップは使用しないでください（他の同種の宣言を上書きするため）：

document.onreadystatechange = ...
— T.トドゥア
ソース
1
このクロスブラウザはサポートされていますか
— bluejayke
この答えは他の答えよりもはるかに優れています。+1
— Xydez
とても良い！ありがとう。
— Farzin Kanzi
34

jQueryを使用できる場合は、loadを確認してください。次に、要素の読み込みが完了した後に実行するように関数を設定できます。

たとえば、単純な画像のあるページを考えてみます。

<img src="book.png" alt="Book" id="book" />

イベントハンドラーは画像にバインドできます。

$('#book').load(function() {
  // Handler for .load() called.
});

現在のウィンドウのすべての要素を読み込む必要がある場合は、 

$(window).load(function () {
  // run code
});
— ハイメ・トーレス
ソース
1
jQuery loadメソッドは、JavaScriptを使用して関数をロードイベントにバインドするだけではありませんか？これは、OPがすでに行っていることとどのように違うのでしょうか？
— Alex Kalicki
@AlexKalicki AFAIKは、jQueryがaddEventListenerDOM0 onloadプロパティをバインドするのではなく使用する場合があることを除いて、違いはありません。
— Alnitak
@AlexKalickiまったく同じ機能を使用しているとは言えませんが、ドキュメントによると、jQueryはこれが発生する前に画像を含むすべての要素が確実に読み込まれるようにしています。これが当てはまる場合、追加のロジックが導入されると思いがちですが、OPが報告しているのと同じ問題に遭遇したことはありませんが、ドキュメントを信じない理由はありません。
— Jaime Torres
4
JQuery v1.8以降、.loadは非推奨になりました。 出典
— Adonis K. Kakoulidis 2013年
1
質問に対するこれまでで最高のソリューション。
— ロベルト・セプルベダブラボー
29

ページの読み込みが完了したこと、「DOM読み込み」または「コンテンツ読み込み」が何を意味するのか少し混乱していますか？HTMLページでは、2つのタイプのイベントの後にロードがイベントを起動できます。

  1. DOMロード：ロードされたDOMツリー全体が最初から最後まで確実にロードされます。ただし、参照コンテンツを確実にロードすることはできません。imgタグで画像を追加したとすると、このイベントにより、すべてimgの画像が正しく読み込まれたかどうかを確認できます。このイベントを取得するには、次のように記述する必要があります。

    document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

    またはjQueryを使用： 

    $(document).ready(function(){
// your code
});

  2. DOMおよびコンテンツのロード後：DOMおよびコンテンツのロードも示します。imgタグだけでなく、すべての画像やその他の関連コンテンツが読み込まれるようにします。このイベントを取得するには、次のように記述する必要があります。

    window.addEventListener('load', function() {...})

    またはjQueryを使用：

    $(window).on('load', function() {
 console.log('All assets are loaded')
})
— ハニフ
ソース
2
これがOPの非jQueryソリューションを提供する唯一の回答であり、明確な説明
— Velojet
@Hanif DOMContentLoadedイベントハンドラーは私には何も実行しないようですが、実行loadします。
— Brandon Benefield、2018年
1
最後の2つの例では、行の終わりにセミコロンが必要ではありませんか？
— R.ナベガ2018
11

HTMLページでjs関数を呼び出す場合は、onloadイベントを使用します。onloadイベントは、ユーザーエージェントがFRAMESET内のウィンドウまたはすべてのフレームの読み込みを完了したときに発生します。この属性は、BODYおよびFRAMESET要素で使用できます。

<body onload="callFunction();">
....
</body>
— ユーザー2361682
ソース
7

この方法で、両方のケースを処理できます-ページがすでにロードされているかどうか。

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}
— tsveti_iko
ソース
3

あるいは、以下を試すこともできます。

$(window).bind("load", function() { 
// code here });

これはすべてのケースで機能します。これは、ページ全体が読み込まれたときにのみトリガーされます。

— ガネーシャラムラビ
ソース
3

あなたが私が知っている限り使用するのが最善です

window.addEventListener('load', function() {
    console.log('All assets loaded')
});

DOMContentLoadedすべてのアセットが読み込まれる前にDOMが読み込まれるため、このイベントを使用することの＃1の答えは1つ後戻りです。

他の回答setTimeoutは、クライアントのデバイスのパフォーマンスとネットワーク接続速度に完全に主観的であるため、私が強く反対することをお勧めします。誰かが遅いネットワークや遅いCPUを使用している場合、ページの読み込みに数秒から数十秒かかることがあるため、setTimeout必要な時間を予測できませんでした。

についてはreadystatechange、MDNにreadyStateよると、イベントの前に変更が発生するたびに発生します。load

コンプリート

この状態は、loadイベントが発生しようとしていることを示しています。

— ライアン・ウォーカー
ソース
2 
window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}
— tvrcgo
ソース
2
このコードスニペットが解決策となる可能性がありますが、説明を含めると、投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
— yivi
@yiviそれが自動化されたメッセージではない場合：それは...コード内のコメントがあるので、特に何そのコード手段、誰にもかなり明白だ
— bluejayke
1

すでにjQueryを使用している場合は、これを試すことができます。 

$(window).bind("load", function() {
   // code here
});
— Santosh
ソース
4
説明なしでは役に立たない。
— Daniel W.
1

私が見つけた最良の答えは、</body>コマンドの直後に「ドライバー」スクリプトを置くことです。これは、上記のいくつかのソリューションよりも簡単で、おそらくより普遍的です。

計画：私のページにはテーブルがあります。テーブルのあるページをブラウザに書き込んでから、JSで並べ替えます。ユーザーは、列ヘッダーをクリックすることで、それを並べ替えることができます。

テーブルが</tbody>コマンドで終了し、本文が終了したら、次の行を使用して、並べ替えJSを呼び出し、テーブルを列3で並べ替えます。並べ替えスクリプトをWebから取得したので、ここでは再現しません。少なくとも翌年は、JSを含め、これが動作しているのをで確認できますstatic29.ILikeTheInternet.com。ページ下部の「こちら」をクリックしてください。テーブルとスクリプトを含む別のページが表示されます。データが表示され、すぐに並べ替えられることがわかります。少し速度を上げる必要がありますが、基本は今です。

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

MakerMikey

— マイケル・モロー
ソース
0

このjQueryを試してください：

$(function() {
 // Handler for .ready() called.
});
— djserva
ソース
1
jQuery readyは、OPが要求したことを行いません。ready要素が読み込まれた後ではなく、DOMが読み込まれたときに発生します。load要素の読み込み/レンダリングが完了した後に発生します。
— Jaime Torres
0

完全なページ読み込み設定のタイムアウト後に関数を呼び出す 

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);
スニペットを展開

— MH
ソース
0

読み込みが完了するまでドキュメントをチェックするために、次のパターンを使用する傾向があります。この関数は、ドキュメントの読み込みが完了すると解決するPromise（IEをサポートする必要がある場合は、polyfillを含める）を返します。setInterval同様の実装でsetTimeoutは非常に深いスタックが発生する可能性があるため、下で使用します。

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

もちろん、IEをサポートする必要がない場合：

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

この関数を使用すると、次のことができます。

getDocReadyPromise().then(whatIveBeenWaitingToDo);
— ポール・ロウ
ソース
-1

私はそれが私のために働くようにウェブコンポーネントを使用しています：

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});
— ウフコマー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.