'$（document）.ready（）'に相当するjQuery以外の機能は何ですか？

非jQueryに相当するものは$(document).ready()何ですか？

良い点$(document).ready()は、それが前に発火するということwindow.onloadです。ロード機能は、外部アセットや画像を含むすべてがロードされるまで待機します。$(document).readyただし、DOMツリーが完了して操作できる場合に発生します。jQueryなしでDOMを準備したい場合は、このライブラリにチェックインすることができます。誰かreadyがjQueryから一部だけを抽出しました。その素晴らしくて小さい、あなたはそれが便利であると思うかもしれません：

Google Codeでdomready

これはECMAから完全に機能します

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

window.onloadjQueryのに等しくない$(document).readyので、$(document).ready唯一のDOMツリーに待機しながら、window.onload外部の資産及び画像を含むすべての要素を確認してください。

編集：Jan Derkの観察のおかげで、IE8以前の同等物が追加されました。MDNのこのリンクから、このコードのソースを読むことができます。

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

以外にも他のオプションがあります"interactive"。詳細については、MDNリンクを参照してください。

私がまとめた小さなこと

domready.js

(function(exports, d) {
  function domReady(fn, context) {

    function onReady(event) {
      d.removeEventListener("DOMContentLoaded", onReady);
      fn.call(context || exports, event);
    }

    function onReadyIe(event) {
      if (d.readyState === "complete") {
        d.detachEvent("onreadystatechange", onReadyIe);
        fn.call(context || exports, event);
      }
    }

    d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
    d.attachEvent      && d.attachEvent("onreadystatechange", onReadyIe);
  }

  exports.domReady = domReady;
})(window, document);

それの使い方

<script src="domready.js"></script>
<script>
  domReady(function(event) {
    alert("dom is ready!");
  });
</script>

2番目の引数を渡すことにより、コールバックが実行されるコンテキストを変更することもできます

function init(event) {
  alert("check the console");
  this.log(event);
}

domReady(init, console);

2018年ですので、ここにすばやく簡単な方法があります。

これによりイベントリスナーが追加されますが、既に発生している場合は、domが準備完了状態にあるか、それが完了していることを確認します。これは、サブリソース（画像、スタイルシート、フレームなど）の読み込みが完了する前または後に起動できます。

function domReady(fn) {
  // If we're early to the party
  document.addEventListener("DOMContentLoaded", fn);
  // If late; I mean on time.
  if (document.readyState === "interactive" || document.readyState === "complete" ) {
    fn();
  }
}

domReady(() => console.log("DOM is ready, come and get it!"));

追加の読み

• https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  • ロードがすでに完了しているかどうかの確認
• https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

更新

TypeScriptを含む、私が書いた標準のES6インポートおよびエクスポートを使用するいくつかのクイックユーティリティヘルパーを次に示します。多分私はこれらを依存関係としてプロジェクトにインストールできる簡単なライブラリにすることに取りかかることができます。

JavaScript

export const domReady = (callBack) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

TypeScript

export const domReady = (callBack: () => void) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack: () => void) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

約束

export const domReady = new Promise(resolve => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', resolve);
  }
  else {
    resolve();
  }
});

export const windowReady = new Promise(resolve => {
  if (document.readyState === 'complete') {
    resolve();
  }
  else {
    window.addEventListener('load', resolve);
  }
});

http://youmightnotneedjquery.com/#readyによると、IE8で引き続き機能する優れた代替品は

function ready(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

// test
window.ready(function() {
    alert('it works');
});

改善：個人的には、型がfn関数かどうかもチェックします。そして@elliottreganが提案したように、使用後にイベントリスナーを削除します。

私がこの質問に後で答える理由は、私がこの答えを探していたが、ここでは見つけられなかったためです。そして、これが最良の解決策だと思います。

標準ベースの置き換えであるDOMContentLoadedがあり、ブラウザの90％以上でサポートされていますが、IE8ではサポートされていません（以下のコードは、JQueryによるブラウザサポート用に使用されています）。

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

以下に示すように、jQueryのネイティブ関数は、単なるwindow.onloadよりもはるかに複雑です。

function bindReady(){
    if ( readyBound ) return;
    readyBound = true;

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            jQuery.ready();
        }, 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", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                jQuery.ready();
            }
        });

        // If IE and not an iframe
        // continually check to see if the document is ready
        if ( document.documentElement.doScroll && window == window.top ) (function(){
            if ( jQuery.isReady ) return;

            try {
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left");
            } catch( error ) {
                setTimeout( arguments.callee, 0 );
                return;
            }

            // and execute any waiting functions
            jQuery.ready();
        })();
    }

    // A fallback to window.onload, that will always work
    jQuery.event.add( window, "load", jQuery.ready );
}

ライブラリのない単純なバニラJavaScriptでは？エラーです。$は単なる識別子であり、定義しない限り未定義です。

jQueryは$それ自体を「すべてのオブジェクト」として定義します（jQuery他のライブラリと競合せずに使用できることからも知られています）。jQuery（またはそれを定義する他のライブラリ）を使用して$いない場合は、定義されません。

それとも、同等の機能がプレーンなJavaScriptにあるのかと質問していますか？その場合は、おそらくが必要ですwindow.onload。これは完全に同等ではありませんが、バニラJavaScriptで同じ効果に近づくための最も簡単な方法です。

最近のブラウザーで最も簡単な方法は、適切なGlobalEventHandlers、onDOMContentLoaded、onload、onloadeddata（...）を使用することです。

onDOMContentLoaded = (function(){ console.log("DOM ready!") })()

onload = (function(){ console.log("Page fully loaded!") })()

onloadeddata = (function(){ console.log("Data loaded!") })()

DOMContentLoadedイベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、最初のHTMLドキュメントが完全に読み込まれて解析されたときに発生します。非常に異なるイベントロードは、完全にロードされたページを検出するためにのみ使用する必要があります。DOMContentLoadedの方がはるかに適切な場所でloadを使用することは非常に人気のある間違いであるため、注意が必要です。

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

使用される関数はIIFEであり、準備が整ったときにトリガーされるため、この場合に非常に役立ちます。

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

スクリプトの最後に配置する方が明らかに適切です。

ES6では、それをアロー関数として記述することもできます。

onload = (() => { console.log("ES6 page fully loaded!") })()

最善の方法はDOM要素を使用することです。矢印の付いたIIFEをトリガーする変数が準備できるまで待つことができます。

動作は同じですが、メモリへの影響は少なくなります。

footer = (() => { console.log("Footer loaded!") })()

<div id="footer">

多くの場合、少なくとも私のブラウザでは、ドキュメントオブジェクトは準備ができたときにもトリガーされます。構文は非常に優れていますが、互換性についてさらにテストする必要があります。

document=(()=>{    /*Ready*/   })()

本体のonLoadも代替手段になる可能性があります。

<html>
<head><title>Body onLoad Exmaple</title>

<script type="text/javascript">
    function window_onload() {
        //do something
    }
</script>

</head>
<body onLoad="window_onload()">

</body>
</html>