web-dev-qa-db-ja.com

完全なページロード後に関数を実行する

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

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

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

しかし、このコードは正しく機能しません。いくつかの画像や要素がロードされていても、この関数は呼び出されます。欲しいのは、ページが完全にロードされたときに関数を呼び出すことです。

javascripthtmlimage
85
Neeraj Kumar

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

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);
131
Shreedhar

A）とプレーンJavaScript：

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

    if (event.target.readyState === "interactive") {      //same as:  document.addEventListener("DOMContentLoaded"...   // same as  jQuery.ready
        alert("All HTML DOM elements are accessible");
    }

    if (event.target.readyState === "complete") {
        alert("Now external resources are loaded too, like css,src etc... ");
    }

});

B）とjQuery：

$(function(){
    alert("hello");
});

C）=記号を使う）以下のメソッドは使わないでください：

document.onreadystatechange = function(){ alert("Hi"); }

他の同種宣言を上書きするからです。

31
T.Todua

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

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

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

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

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

現在のウィンドウ上のすべての要素を読み込む必要がある場合は、次のようにします。

$(window).load(function () {
  // run code
});
30
Jaime Torres

ページの読み込みが完了したという意味、「DOMの読み込み」または「コンテンツの読み込み」も混乱していませんか。 HTMLページでは、2つのタイプのイベントの後にloadイベントが発生する可能性があります。

  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')
})
18
Hanif

あなたがあなたのhtmlページでjs関数を呼びたいならば、onloadイベントを使います。 onloadイベントは、ユーザーエージェントがウィンドウまたはFRAMESET内のすべてのフレームのロードを終了したときに発生します。この属性は、BODY要素とFRAMESET要素と共に使用できます。

<body onload="callFunction();">
....
</body>
10
user2361682

このようにして両方のケースを扱うことができます - ページが既にロードされているかどうか：

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}
6
tsveti_iko

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

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

これはすべての場合に機能します。これはページ全体がロードされたときにのみトリガーされます。

2
Ganesh Ram Ravi

すでにjQueryを使っているのなら、これを試すことができます

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

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

計画：私のページにはテーブルがあります。テーブル付きのページをブラウザに書き出し、JSでソートします。ユーザーは列見出しをクリックしてそれを再分類できます。

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

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

メーカーマイキー

1
Micheal Morrow
window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}
1
tvrcgo

JSフレームワークを使用していない場合は、このプロジェクトがブラウザ間の互換性を保ちながらdom ready状態にするための最良の方法です。

https://github.com/ded/domready/blob/master/ready.js

1
Olivier Refalo

完全なページロード設定タイムアウト後に関数を呼び出す

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);
0
M.H

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

$(function() {
 // Handler for .ready() called.
});
0
djserva