Qual é o equivalente não-jQuery de '$ (document) .ready ()'?

Qual é o equivalente não-jQuery $(document).ready()?

O bom $(document).ready()é que ele dispara antes window.onload. A função de carregamento aguarda até que tudo seja carregado, incluindo imagens e ativos externos. $(document).ready, no entanto, é acionado quando a árvore DOM está concluída e pode ser manipulada. Se você deseja obter o DOM pronto, sem o jQuery, verifique esta biblioteca. Alguém extraiu apenas a readyparte do jQuery. É agradável e pequeno e você pode achar útil:

já está no Google Code

Isso funciona perfeitamente, da ECMA

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

O window.onloadnão é igual ao JQuery $(document).readyporque $(document).readyaguarda apenas a árvore DOM enquanto window.onloadverifica todos os elementos, incluindo ativos e imagens externos.

EDITAR : Adicionado IE8 e equivalente mais antigo, graças à observação de Jan Derk . Você pode ler a fonte desse código no MDN neste link :

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

Existem outras opções além de "interactive". Vejo o link MDN para detalhes.

Uma coisinha que eu montei

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

Como usá-lo

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

Você também pode alterar o contexto em que o retorno de chamada é executado passando um segundo argumento

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

domReady(init, console);

Agora que é 2018, aqui está um método rápido e simples.

Isso adicionará um ouvinte de evento, mas se ele já tiver sido acionado, verificaremos se o dom está em um estado pronto ou completo. Isso pode disparar antes ou depois do carregamento dos sub-recursos (imagens, folhas de estilo, molduras etc.).

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

Leituras adicionais

• https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  • Verificando se o carregamento já está completo
• https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

Atualizar

Aqui estão alguns ajudantes rápidos de utilitários que usam o ES6 Import & Export que eu escrevi e que também incluem o TypeScript. Talvez eu possa criar uma biblioteca rápida que possa ser instalada em projetos como uma dependência.

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

Promessas

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

De acordo com http://youmightnotneedjquery.com/#ready, um bom substituto que ainda funciona com o 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');
});

melhorias : Pessoalmente, eu também verificaria se o tipo de fné uma função. E como sugeriu a @elliottregan, remova o ouvinte do evento após o uso.

O motivo pelo qual respondi tarde a essa pergunta é porque estava procurando por essa resposta, mas não a encontrei aqui. E acho que essa é a melhor solução.

Existe uma substituição baseada em padrões, DOMContentLoaded , suportada por mais de 90% dos navegadores, mas não o IE8 (portanto, abaixo do código usado pelo JQuery para suporte ao navegador) :

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

A função nativa do jQuery é muito mais complicada do que apenas window.onload, como mostrado abaixo.

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

Em simples baunilha JavaScript, sem bibliotecas? É um erro. $é simplesmente um identificador e é indefinido, a menos que você o defina.

O jQuery define $como seu próprio "objeto tudo" (também conhecido como jQuerypara que você possa usá-lo sem entrar em conflito com outras bibliotecas). Se você não estiver usando o jQuery (ou alguma outra biblioteca que o defina), $não será definido.

Ou você está perguntando qual é o equivalente em JavaScript simples? Nesse caso, você provavelmente deseja window.onload, o que não é exatamente equivalente, mas é a maneira mais rápida e fácil de se aproximar do mesmo efeito no JavaScript vanilla.

A maneira mais fácil nos navegadores recentes seria usar o GlobalEventHandlers apropriado , onDOMContentLoaded , onload , onloadeddata (...)

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

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

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

O evento DOMContentLoaded é acionado quando o documento HTML inicial tiver sido completamente carregado e analisado, sem aguardar folhas de estilo, imagens e sub-quadros para concluir o carregamento. Um carregamento de evento muito diferente deve ser usado apenas para detectar uma página totalmente carregada. É um erro incrivelmente popular usar o load em que DOMContentLoaded seria muito mais apropriado, portanto, tenha cuidado.

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

A função usada é um IIFE, muito útil neste caso, pois se aciona quando pronto:

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

É obviamente mais apropriado colocá-lo no final de qualquer script.

No ES6, também podemos escrevê-lo como uma função de seta:

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

O melhor é usar os elementos DOM, podemos esperar que qualquer variável esteja pronta, que aciona um IIFE com flecha.

O comportamento será o mesmo, mas com menos impacto na memória.

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

<div id="footer">

Em muitos casos, o objeto de documento também é acionado quando pronto , pelo menos no meu navegador. A sintaxe é muito boa, mas precisa de mais testes sobre compatibilidade.

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

O corpo onLoad também pode ser uma alternativa:

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

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

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

</body>
</html>