以下のコードを使って、ページロード後にいくつかのステートメントを実行しています。
<script type="text/javascript">
window.onload = function () {
newInvite();
document.ag.src="b.jpg";
}
</script>
しかし、このコードは正しく動作しません。いくつかの画像や要素が読み込まれていても、関数が呼び出されてしまいます。私が望んでいるのは、ページが完全に読み込まれたときに、この関数を呼び出すことです。
これはあなたのために働くかもしれません。
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);
jQueryが使えるのであれば、loadを見てみましょう。 そうすれば、要素の読み込みが終わった後に関数が実行されるように設定することができます。
例えば、シンプルな画像を使ったページを考えてみましょう。
<img src="book.png" alt="Book" id="book" />
イベントハンドラを画像にバインドすることができます。
$('#book').load(function() {
// Handler for .load() called.
});
現在のウィンドウ上のすべての要素をロードする必要がある場合には
$(window).load(function () {
// run code
});