回答:
それがload
です。それはDOM readyが登場する前にやってきました、そしてDOM readyは実際load
に画像を待っていた正確な理由のために作成されました。
window.addEventListener('load', function () {
alert("It's loaded!")
})
window.onload
が呼び出されます。私は正しいですか?
onload
ドキュメントの一部であるすべてのリソースを待ちます。もちろん、これには、AJAX要求など、ドキュメント自体の一部ではない動的に作成された要求は含まれません。
addEventListener("load", function(){
…です。})
onload
通常はを使用できますがwindow.onload
、window.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();">
完全を期すために、現在広くサポートされているDOMContentLoadedにバインドすることもできます。
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});
詳細:https : //developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
$.ready
された回答のスレッドのユーザーは参考になったので、それは良い貢献をしたと思いました。ところで 私が使用したいaddEventListener
ためにも-methodをload
:それはあなたが複数のコールバックを持つことができますように、しかしイベントwindow.addEventListener("load", function(event){ // your code here });
ページ全体が読み込まれた後にのみ実行してみてください
JavaScriptによる
window.onload = function(){
// code goes here
};
jquery
$(window).bind("load", function() {
// code goes here
});
$(window)
これはjqueryだと思います-正しいですか?それとも私はいくつかのJavaScript構文が混乱していますか?(私はJSを初めて使います)。
$(document).ready();
jQueryが利用可能な場合は、なぜ単純に使用しないのですか?
このコードを試してください
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}
訪問https://developer.mozilla.org/en-US/docs/DOM/document.readyStateの詳細は、
"interactive"
完全にロードされていません。 "complete"
完全にロードされています
onLoad()
イベントを使用するJavaScript は、ページがロードされるのを待ってから実行されます。
<body onload="somecode();" >
jQueryフレームワークのドキュメント準備関数を使用している場合、DOMが読み込まれた直後に、ページのコンテンツが読み込まれる前に、コードが読み込まれます。
$(document).ready(function() {
// jQuery code goes here
});
DOMの準備が整い、ページ内の他のすべてのアセット(画像など)が読み込まれるまでは起動されないことがドキュメントに示されているため、window.onloadを使用することをお勧めします。
そして、これがPrototypeJSでそれを行う方法です:
Event.observe(window, 'load', function(event) {
// Do stuff
});
最新の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にアクセスしてください。
onload
用途を使用する必要がある場合$(window).load
(jQuery):$(window).load(function() {
//code
});
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;
};