Quel est l'équivalent non-jQuery de "$(document).ready()" ?

Question

Quel est l'équivalent non-jQuery de $(document).ready() ?

Answer 1

Cela fonctionne parfaitement, par l'ECMA

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

L' window.onload ne marche pas égal à JQuery $(document).ready parce que JQuery n'attend que de l'arborescence DOM, tandis que la Vanille JS vérifier tous les éléments, y compris les avoirs extérieurs et des images.

EDIT: Ajout d'IE8 et plus équivalent, grâce à Derk Jan

document.attachEvent("onreadystatechange", function(){
  if (document.readyState === "complete"){
    document.detachEvent( "onreadystatechange", arguments.callee );
    // code ...
  }
});

Answer 2

Une petite chose, j'ai mis en place

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

Comment l'utiliser

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

Vous pouvez également modifier le contexte dans lequel la fonction de rappel s'exécute en passant un second argument

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

domReady(init, console);

Answer 3

La bonne chose à propos de $(document).ready() , c'est qu'il se déclenche avant que l' window.onload. La fonction load attend jusqu'à ce que tout est chargé, y compris les avoirs extérieurs et des images. $(document).ready, cependant, se déclenche lorsque l'arbre du DOM est complet et peut être manipulé. Si vous souhaitez réaliser DOM prêt, sans jQuery, vous pouvez vérifier dans cette bibliothèque. Quelqu'un extrait juste le ready partie de jQuery. Sa belle et de petites et vous trouverez peut-être utile:

domready sur Google Code

Answer 4

En JavaScript pur, sans aucune bibliothèque ? C'est une erreur. $ est simplement un identificateur et est indéfini à moins que vous ne le définissiez.

jQuery définit $ en tant que son propre "objet tout" (également connu sous le nom de jQuery afin que vous puissiez l'utiliser sans conflit avec d'autres bibliothèques). Si vous n'utilisez pas jQuery (ou une autre bibliothèque qui le définit), alors $ ne sera pas défini.

Ou demandez-vous quel est l'équivalent en JavaScript ? Dans ce cas, vous voulez probablement window.onload qui n'est pas exactement équivalent, mais qui est le moyen le plus rapide et le plus simple d'obtenir le même effet en JavaScript vanille.

Answer 5

Je crois que vous voulez window.onload