167

ドキュメントの読み込み後に関数を呼び出したいのですが、ドキュメントの読み込みがまだ完了している場合と完了していない場合があります。ロードされた場合は、関数を呼び出すだけです。ロードされなかった場合は、イベントリスナーをアタッチできます。onloadが呼び出されないため、onloadがすでに起動された後、eventlistenerを追加できません。では、ドキュメントが読み込まれたかどうかを確認するにはどうすればよいですか？以下のコードを試しましたが、完全には機能しません。何か案は？

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if (body && body.readyState == 'loaded') {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {  
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload', DoStuffFunction);
    }
}
4

9 に答える 9

264

galambalazs が言及したすべてのコードは必要ありません。純粋な JavaScript でそれを行うクロスブラウザーの方法は、単純にテストすることdocument.readyStateです:

if (document.readyState === "complete") { init(); }

これは jQuery のやり方でもあります。

JavaScript がロードされる場所に応じて、これは間隔内で実行できます。

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        init();
    }
}, 10);

実際には、document.readyState次の 3 つの状態を持つことができます。

ドキュメントの読み込み中は「読み込み中」、解析が終了してもサブリソースの読み込み中は「インタラクティブ」、読み込みが完了すると「完了」を返します。-- Mozilla Developer Network の document.readyState

したがって、DOM の準備だけが必要な場合は、document.readyState === "interactive". 画像を含むページ全体を用意する必要がある場合は、 を確認してくださいdocument.readyState === "complete"。

于 2011-08-17T05:57:49.857 に答える
32

ライブラリは必要ありません。jQuery はこのスクリプトをしばらく使用していました。

http://dean.edwards.name/weblog/2006/06/again/

// Dean Edwards/Matthias Miller/John Resig

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;

  // flag this function so we don't do the same thing twice
  arguments.callee.done = true;

  // kill the timer
  if (_timer) clearInterval(_timer);

  // do stuff
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
  document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;
于 2010-06-29T20:34:07.210 に答える
14

おそらく、JS プログラミングを容易にする jQuery のようなものを使用したいと思うでしょう。

何かのようなもの：

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

あなたが求めていることをするようです。

于 2009-06-11T01:16:29.323 に答える
9 
if(document.readyState === 'complete') {
    DoStuffFunction();
} else {
    if (window.addEventListener) {  
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload', DoStuffFunction);
    }
}
于 2010-11-17T13:36:34.603 に答える
4

上記のJQueryを使用した方法は、最も簡単で最もよく使用される方法です。ただし、純粋なjavascriptを使用することはできますが、最初に読み取られるように、このスクリプトを頭の中で定義してみてください。あなたが探しているのはwindow.onloadイベントです。

以下は、カウンターを実行するために作成した簡単なスクリプトです。その後、カウンターは10回の反復後に停止します

window.onload=function()
{
    var counter = 0;
    var interval1 = setInterval(function()
    { 
        document.getElementById("div1").textContent=counter;
        counter++; 
        if(counter==10)
        {
            clearInterval(interval1);
        }
    },1000);

}
于 2012-04-11T06:47:13.773 に答える
4

Mozilla Firefox はonreadystatechange、それがDOMContentLoaded.

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        initApplication();
    }
}

DOMContentLoadedMozilla のドキュメントには次のように書かれています。

DOMContentLoaded イベントは、スタイルシート、画像、およびサブフレームの読み込みが完了するのを待たずに、ドキュメントが完全に読み込まれて解析されると発生します (load イベントを使用して、完全に読み込まれたページを検出できます)。

load完全なドキュメントとリソースの読み込みにはイベントを使用する必要があると思います。

于 2014-07-16T11:27:36.430 に答える
2

これを試して：

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if ((body && body.readyState == 'loaded') || (body &&  body.readyState == 'complete') ) {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload',DoStuffFunction);
    }
}
于 2013-12-10T13:44:33.210 に答える