JavaScript DOM pronto

1. Use a função jQuery ready() para chamar funções quando o DOM estiver pronto
2. Abordagem Vanilla JavaScript para chamar funções quando o DOM está pronto

O carregamento de um site começa com o download do documento HTML. Depois que o documento HTML é baixado, o HTML é analisado e os recursos necessários são baixados. Depois que o HTML é analisado, o DOM e o CSS são renderizados em paralelo. Depois disso, o navegador cuida das funções onload do JavaScript. Este é o período de tempo que queremos chamar de funções porque HTML, CSS, DOM são renderizados corretamente. Este tutorial ensina como chamar uma função quando o DOM estiver pronto.

Use a função jQuery ready() para chamar funções quando o DOM estiver pronto

A função ready() em jQuery executa o código quando o DOM está pronto. Ele espera que todos os elementos sejam totalmente carregados e, em seguida, tenta acessá-los e manipulá-los. Podemos selecionar o elemento documento, um elemento vazio para chamar uma função, ou mesmo chamar diretamente uma função.

$(document).ready(function() {
  // callback function / handler
});

É um método totalmente compatível com vários navegadores e pode ser chamado de qualquer lugar no código HTML.

Abordagem Vanilla JavaScript para chamar funções quando o DOM está pronto

Podemos criar o equivalente em JavaScript da função ready() do jQuery usando o evento DOMContentLoaded. Podemos adicionar um ouvinte de evento para DOMContentLoaded e chamar nossa função desejada com esse ouvinte de evento. Mas há um problema: o retorno de chamada não será acionado se o evento já tiver ocorrido. Portanto, cuidamos dessa condição verificando o estado de prontidão do objeto de documento.

const callback = function() {};

if (document.readyState === 'complete' ||
    document.readyState === 'interactive') {
  setTimeout(callback, 1);
} else {
  document.addEventListener('DOMContentLoaded', callback);
}

Existem alguns truques além desses métodos que nos ajudam a resolver esse problema, mas podem não ser ideais em todos os casos.

• Use o atributo onload da janela para chamar a função JavaScript.
• Use o atributo onload do corpo para chamar a função JavaScript. Esse método pode ser terrivelmente lento, pois espera que cada elemento seja carregado.
• Podemos chamar a função a ser executada a partir do final do corpo. No final do corpo, o DOM está apropriadamente renderizado e pronto. Portanto, não há problemas com chamadas de função relacionadas a qualquer elemento. Ele funciona muito mais rápido do que o manipulador onload do corpo porque não espera que as imagens sejam carregadas completamente.