33

jquery $（document）.ready（function）または$（function）で、jqueryなしで同じことを行うにはどうすればよいですか。ブラウザーと互換性があり、複数の関数をアタッチできるようにする必要があります。

注：dom ready！= window onload

4

7 に答える 7

24

これは、jQueryが探している関数をラップする方法です。スニペットはjQueryを必要とせず、クロスブラウザー互換です。jQuery.ready（）へのすべての呼び出しをyourcallback-で置き換えました。これは定義する必要があります。

ここで何が起こっているのか：

  • 最初にDOMContentLoaded、DOMContentLoadedイベントが発生したときに使用される関数が定義されます。これにより、コールバックが1回だけ呼び出されるようになります。
  • ドキュメントがすでにロードされているかどうかを確認します-ロードされている場合は、すぐにコールバックを起動します
  • document.addEventListenerそれ以外の場合は、機能（ / ）をスニッフィングしdocument.attachEvent、コールバックをそれにバインドします（IEと通常のブラウザーでは異なり、さらにonloadコールバック）

jQuery 1.4.3から削除された、関数bindReady（）およびDOMContentLoaded：

/*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
// Cleanup functions for the document ready method
// attached in the bindReady handler
if ( document.addEventListener ) {
DOMContentLoaded = function() {
    document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    //jQuery.ready();
            yourcallback();
};

} else if ( document.attachEvent ) {
DOMContentLoaded = function() {
    // Make sure body exists, at least, in case IE gets a little overzealous 
            if ( document.readyState === "complete" ) {
        document.detachEvent( "onreadystatechange", DOMContentLoaded );
        //jQuery.ready();
                    yourcallback();
    }
    };
}

// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
//return setTimeout( jQuery.ready, 1 );
    // ^^ you may want to call *your* function here, similarly for the other calls to jQuery.ready
    setTimeout( yourcallback, 1 );
}

// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
    // Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
//window.addEventListener( "load", jQuery.ready, false );
    window.addEventListener( "load", yourcallback, false );
 // If IE event model is used
 } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", DOMContentLoaded);

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", yourcallback );

 }

これは、イベントを確実に登録するための51行の純粋なJavaScriptコードです。私の知る限り、これ以上簡単な方法はありません。jQueryのようなラッパーが何に適しているかを示します。それらは機能スニッフィングと醜い互換性の問題をラップして、他のことに集中できるようにします。

于 2010-10-21T15:45:28.573 に答える
9

史上最小のDOMReadyコード。

<html>
  <head>
    <script>
      var ready = function (f) {
        (/complete|loaded|interactive/.test(document.readyState)) ?
            f() :
            setTimeout(ready, 9, f);
      };
    </script>
  </head>
  <body>
    <script>
      ready(function () {
        alert('DOM Ready!');
      });
    </script>
  </body>
</html>
于 2011-08-11T13:41:39.543 に答える
3

IE9 +および最新（2013）バージョンのChrome、FF、Safariなどをサポートしている場合に必要なのはこれだけです。

function ready(event) {
    // your code here
    console.log('The DOM is ready.', event);
    // clean up event binding
    window.removeEventListener('DOMContentLoaded', ready);
}

// bind to the load event
window.addEventListener('DOMContentLoaded', ready);
于 2013-04-30T06:35:57.670 に答える
2

これが私が使っている方法で、確実に機能しているようです

function ready(func) {
  var span = document.createElement('span');
  var ms = 0;
  setTimeout(function() {
    try {
      document.body.appendChild(span);

      document.body.removeChild(span);

      //Still here? Then document is ready
      func();
    } catch(e) {
      //Whoops, document is not ready yet, try again...

      setTimeout(arguments.callee, ms);
    }
  }, ms);
}

非常に単純で、空の<span>要素をに追加しようとし続けますdocument.body。ドキュメントが「準備完了」でない場合、例外がスローされます。その場合、ドキュメントは新しいsetTimeout呼び出しで再試行します。例外がスローされなくなると、コールバック関数が呼び出されます。

この方法に問題があれば、喜んでお聞きします。それは私にとってはうまくいきましたが、一般的なJavascriptフレームワークに自然なような広範なテストは行っていません。

于 2010-10-21T18:15:45.830 に答える
1

私はこれをしようとする多くの異なる方法を見てきました。最も簡単な方法（最初はyahooが提案したと思います）は、close bodyタグの後にイニシャライザー関数を呼び出すだけで、少しわかりにくいですが、これは1行です。

于 2010-10-21T17:45:39.930 に答える
0

編集

DomReadyイベントは、JavaScriptには自然に存在しません。こことここでディーン・エドワーズのような人々によって行われたいくつかの素晴らしい作業をフォローすることで、独自の作業を実装できます。これらを配置すると、ウィンドウではなくドキュメントに対して同様のイベント添付プロセスを実行できます。

Javascriptでwindow.onloadイベントを追加するにはどうすればよいですか？に対するuser83421の回答を確認してください。

ここでも要約します。

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}
于 2010-10-21T15:30:48.577 に答える
0

これは、「closebody」タグの後と「closehtml」タグの前にあります。そしてそれはかなりうまく機能します。プリセットのロード機能は、幅、高さ、および位置の値をcssdivタグに割り当てます。さまざまな画面サイズに役立ちます。

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

}

于 2014-07-24T02:07:11.237 に答える