ページが完全に読み込まれたときに関数を実行するにはどうすればよいですか?


307

ページが完全に読み込まれたら、JavaScriptコードを実行する必要があります。これには画像などが含まれます。

DOMの準備ができているかどうかは確認できますが、ページが完全に読み込まれたときと同じかどうかはわかりません。


7
では、DOMの準備ができているかどうかをどのように確認しますか?
Mads Skjern 2014

回答:


442

それがloadです。それはDOM readyが登場する前にやってきました、そしてDOM readyは実際loadに画像を待っていた正確な理由のために作成されました。

window.addEventListener('load', function () {
  alert("It's loaded!")
})

3
そのため、説明を明確にするために(可能であれば)、DOM対応と比較して、すべてのページコンポーネント/リソース(つまり、*画像を含む)window.onloadが呼び出さます。私は正しいですか?
BreakPhreak

19
@BreakPhreak:yes :) onloadドキュメントの一部であるすべてのリソースを待ちます。もちろん、これには、AJAX要求など、ドキュメント自体の一部ではない動的に作成された要求は含まれません。
抹茶

3
スクリプトが完全に読み込まれていません
HD ..

スクリプトが動的にロードされ、ハンドラーを追加する前に「load」イベントが発生した場合はどうなりますか?
パメラス

31
プロパティを上書きするのではなく、より良い方法はaddEventListener("load", function(){…です。})onload
user4642212 2017

30

通常はを使用できますがwindow.onloadwindow.onload履歴の戻る/進むボタンを使用しても最近のブラウザが起動しないことに気付く場合があります。

一部の人々この問題を回避するために奇妙なゆがみを提案しますが、実際にwindow.onunloadハンドラー(何もしないものでも)だけを作成すると、すべてのブラウザーでこのキャッシュ動作が無効になります。MDCはかなりよく、この「機能」を文書化しますが、何らかの理由で使っている人がまだありますsetIntervalし、他の奇妙なハックが。

Operaの一部のバージョンには、ページのどこかに次のコードを追加することで回避できるバグがあります。

<script>history.navigationMode = 'compatible';</script>

ビューごとに1回呼び出されるJavaScript関数を取得しようとしているだけの場合(必ずしもDOMの読み込みが完了した後ではない)、次のようなことができます。

<img src="javascript:location.href='javascript:yourFunction();';">

たとえば、このトリックを使用して、非常に大きなファイルをロード画面のキャッシュにプリロードします。

<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">

誰でもこのトリックがどのように機能するかを明確にすることができますか?あまりにも、DOH ...私のために複雑
ばか騒ぎ

20

完全を期すために、現在広くサポートされているDOMContentLoadedにバインドすることもできます。

document.addEventListener("DOMContentLoaded", function(event){
  // your code here
});

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


7
この回答は、質問での質問とは正反対です。
ムハンマドビンユスラット2017

2
実際、DOMContentLoadedイベントは、すべてのDOMコンテンツが読み込まれると、すべての依存関係が読み込まれる前にトリガーされます。参照$.readyされた回答のスレッドのユーザーは参考になったので、それは良い貢献をしたと思いました。ところで 私が使用したいaddEventListenerためにも-methodをload:それはあなたが複数のコールバックを持つことができますように、しかしイベントwindow.addEventListener("load", function(event){ // your code here });
murb

16

ページ全体が読み込まれた後にのみ実行してみてください

JavaScriptによる

window.onload = function(){
    // code goes here
};

jquery

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

1
$(window)これはjqueryだと思います-正しいですか?それとも私はいくつかのJavaScript構文が混乱していますか?(私はJSを初めて使います)。
Azendale 2015

2
$(document).ready();jQueryが利用可能な場合は、なぜ単純に使用しないのですか?
Andreas

yoursはドキュメント(多かれ少なかれ単に解析されたHTML)であり、もう一方( "load")は画像やスタイルを含むすべてです。必要なものによって異なります。
amenthes 2016年

11

このコードを試してください

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

訪問https://developer.mozilla.org/en-US/docs/DOM/document.readyStateの詳細は、


ええ、これは役に立ちます。どうもありがとう〜
ブラボーヨン

2
"interactive"完全にロードされていません。 "complete"完全にロードされています
Ryan Walker

やっと!百万人に感謝、ジェイコブ。ここにリストされている多くのメソッドすべてが失敗しました(せいぜい、ラジオボタンが更新され、結果の計算は実行されますが、ボタンが押されていないように見える)、あなたのメソッドはトリックを実行します。
SECR

8

window.onloadイベントは、画像などを含むすべてが読み込まれると発生します。

jsコードをできるだけ早く実行したいが、それでもDOM要素にアクセスする必要がある場合は、DOM readyステータスを確認する必要があります。


8

onLoad()イベントを使用するJavaScript は、ページがロードされるのを待ってから実行されます。

<body onload="somecode();" >

jQueryフレームワークのドキュメント準備関数を使用している場合、DOMが読み込まれた直後に、ページのコンテンツが読み込まれる前に、コードが読み込まれます。

$(document).ready(function() {
    // jQuery code goes here
});

7

DOMの準備が整い、ページ内の他のすべてのアセット(画像など)が読み込まれるまでは起動されないことがドキュメントに示されているため、window.onloadを使用することをお勧めします。


ああ素晴らしい。よくこれをやった。ページの最後の画像は次のとおりです:<img src = "imdbupdate.php?update = ajax" style = "display:hidden" onload = "window.location = 'movies.php?do = admincp'" />ただし、リダイレクトしない
ベンシェロック09年

...何?画像が読み込まれたらリダイレクトしたいですか?
マッチ09/06/23

なぜそれが必要なのかはわかりませんが、リダイレクトされない理由は、display:hiddenであり、ブラウザが表示されないため、わざわざそれをロードしないためです。
マッチ09年

たぶんそれは、ヒットを追跡したり、DBで何かをしたりするなど、サーバーで何か重要なことをする単なる隠された画像なのでしょうか?
マルクノバコウスキー2009年

私はそれを得ることができますが、それを後にリダイレクトすることは私には意味がありません。ユーザーに時間をかけたくないのに、なぜそのページが存在するのでしょうか。また、ロード時にリダイレクトすることが目的である場合は、window.onloadイベントを使用しないでください。全体的にクリーンな実装であるためです。
マッチ09年


2

最新のJavaScript(> = 2015)を備えた最新のブラウザではtype="module"、スクリプトタグに追加でき、ページ全体が読み込まれた後、そのスクリプト内のすべてが実行されます。例えば:

<script type="module">
  alert("runs after") // Whole page loads before this line execute
</script>
<script>
  alert("runs before")
</script>

また、古いブラウザはnomodule属性を理解します。このようなもの:

<script nomodule>
  alert("tuns after")
</script>

詳細については、javascript.infoにアクセスしてください。



1

GlobalEventHandlersミックスインのonloadプロパティは、ウィンドウ、XMLHttpRequest、要素などのloadイベントのイベントハンドラーであり、リソースが読み込まれたときに発生します。

したがって、基本的にjavascriptには、画像を含む完全にロードされたページが実行されるウィンドウにonloadメソッドがすでにあります...

あなたは何かをすることができます:

var spinner = true;

window.onload = function() {
  //whatever you like to do now, for example hide the spinner in this case
  spinner = false;
};

-1

2019年の更新:これは私のために働いた答えでした。リスト項目を数えるために最初にデータを起動して返すために複数のajaxリクエストが必要だったので。

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.