Equivalente a JavaScript puro de $ .ready () do jQuery - como chamar uma função quando a página / DOM está pronta para ela



5 Answers

Gostaria de mencionar algumas das possíveis maneiras aqui, juntamente com um truque de javascript puro que funciona em todos os navegadores :

// with jQuery 
$(document).ready(function(){ /* ... */ });

// shorter jQuery version 
$(function(){ /* ... */ });

// without jQuery (doesn't work in older IEs)
document.addEventListener('DOMContentLoaded', function(){ 
    // your code goes here
}, false);

// and here's the trick (works everywhere)
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
// use like
r(function(){
    alert('DOM Ready!');
});

O truque aqui, conforme explicado pelo autor original , é que estamos verificando a propriedade document.readyState . Se ele contiver a sequência (como em uninitialized e loading , os dois primeiros estados prontos para DOM de 5), definimos um tempo limite e verificamos novamente. Caso contrário, nós executamos a função passada.

E aqui está o jsFiddle para o truque que funciona em todos os navegadores.

Obrigado ao Tutorialzine por incluir isso em seu livro.

javascript jquery html

Esta questão já tem uma resposta aqui:

Ok, isso pode ser apenas uma pergunta boba, embora eu tenha certeza de que há muitas outras pessoas fazendo a mesma pergunta de vez em quando. Eu só quero ter 100% de certeza sobre isso de qualquer forma. Com jQuery todos nós sabemos o maravilhoso

$('document').ready(function(){});

No entanto, digamos que eu queira executar uma função que esteja escrita em JavaScript padrão sem nenhuma biblioteca que a suporte, e que eu queira iniciar uma função assim que a página estiver pronta para manipulá-la. Qual é a maneira correta de abordar isso?

Eu sei que posso fazer:

window.onload="myFunction()";

... ou eu posso usar a tag body :

<body onload="myFunction()">

... ou posso até tentar na parte inferior da página depois de tudo, mas o body final ou tag html como:

<script type="text/javascript">
   myFunction();
</script>

O que é um método compatível com navegador cruzado (antigo / novo) de emissão de uma ou mais funções de uma maneira como $.ready() do jQuery?




Testado no IE9 e no último Firefox e Chrome e também suportado no IE8.

document.onreadystatechange = function () {
  var state = document.readyState;
  if (state == 'interactive') {
      init();
  } else if (state == 'complete') {
      initOnCompleteLoad();
  }
}​;

Exemplo: http://jsfiddle.net/electricvisions/Jacck/

ATUALIZAÇÃO - versão reutilizável

Eu acabei de desenvolver o seguinte. É um equivalente bastante simplista para jQuery ou Dom pronto sem compatibilidade com versões anteriores. Provavelmente precisa de mais refinamento. Testado em versões mais recentes do Chrome, Firefox e IE (10/11) e deve funcionar em navegadores mais antigos, como comentado. Vou atualizar se encontrar algum problema.

window.readyHandlers = [];
window.ready = function ready(handler) {
  window.readyHandlers.push(handler);
  handleState();
};

window.handleState = function handleState () {
  if (['interactive', 'complete'].indexOf(document.readyState) > -1) {
    while(window.readyHandlers.length > 0) {
      (window.readyHandlers.shift())();
    }
  }
};

document.onreadystatechange = window.handleState;

Uso:

ready(function () {
  // your code here
});

Ele é escrito para manipular o carregamento assíncrono do JS, mas você pode querer sincronizar o carregamento deste script primeiro, a menos que esteja diminuindo. Eu achei útil no desenvolvimento.

Os navegadores modernos também suportam o carregamento assíncrono de scripts, o que aprimora ainda mais a experiência. Suporte para assíncrono significa que vários scripts podem ser baixados simultaneamente enquanto ainda renderizam a página. Apenas observe quando depender de outros scripts carregados de forma assíncrona ou use um minifator ou algo parecido com browserify para lidar com dependências.




Seu método (colocando script antes da tag body de fechamento)

<script>
   myFunction()
</script>
</body>
</html>

é uma maneira confiável de oferecer suporte a navegadores antigos e novos.




Não tenho certeza do que você está perguntando, mas talvez isso possa ajudar:

window.onload = function(){
    // Code. . .

}

Ou:

window.onload = main;

function main(){
    // Code. . .

}



document.ondomcontentready=function(){} deve fazer o truque, mas não tem compatibilidade total com o navegador.

Parece que você deve apenas usar jQuery min




Related