Neste artigo veremos a diferença entre $(document).ready() e window.onload – o que estas duas instruções podem fazer em cada caso de uso
Fala programador(a), vamos então conhecer as duas instruções a fundo!
Entenda a $(document).ready
A instrução $(document).ready foi criada no jQuery, e serve para que o código JavaScript entre em execução apenas quando o HTML for carregado
Isso evita que o código que criamos falhe por causa de algum elemento ainda não renderizado no HTML
Temos a garantia que o mesmo só vai valer depois que toda a árvore de elementos de HTML estão plenamente inseridos na página
Não importando onde o código de JavaScript/jQuery é posicionado
Entenda o window.onload
Já a instrução window.onload é nativa do JavaScript, podemos utilizar ela com jQuery, porém o contrário não acontece, o ready não funciona com JS puro
E ao usar este evento o JavaScript entende que o código abrigado nele deve começar a valer apenas quando todos os elementos da página carregarem
Ou seja, além das tags do HTML, as imagens também deverão já estarem prontas e visíveis
Sendo assim a instrução ready é mais performática, pois o código já pode ser executado antes do que o código que fica inserido em window.onload
Porém se você não estiver utilizando jQuery, a única saída para o seu problema de carregamento de página é o onload, tenha isso em mente
Conclusão
Neste artigo vimos a diferença entre $(document).ready() e window.onload
A instrução ready foi desenvolvida para o jQuery, não sendo disponível no JS Vanilla
Já o onload é nativa do JavaScript
O código dentro de ready é executado assim que todos os elementos HTML forem carregados, já no onload todos os elementos da página precisam ser carregados para o código JS entrar em execução
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube