Qual a diferença entre $(document).ready() e window.onload?

Tanto o $ ( document).ready() quanto o window.onload são eventos usados para executar um código quando uma página HTML é carregada. No entanto, existem algumas diferenças essenciais entre eles:

$ ( document).ready(): É um evento específico do jQuery, uma biblioteca JavaScript muito popular. O evento $ ( document).ready() é acionado quando o documento HTML é totalmente carregado e a árvore DOM (Document Object Model) é completamente carregada e pronto para ser manipulada. Esta é uma abordagem mais eficiente, pois o código pode ser executado assim que for possível, sem aguardar o carregamento completo da página.

Por exemplo, se você precisar manipular elementos da página ou realizar ações de inicialização que não dependam do carregamento completo do conteúdo, o uso do $ ( document).ready() é uma boa opção. Isso é especialmente útil para melhorar a experiência do usuário, carregando e exibindo partes da página antes que tudo esteja totalmente carregado.

$ ( document).ready(function() {
    // Código a ser executado quando o documento está pronto
    // Aqui você pode manipular elementos da página ou realizar inicializações.
});

window.onload: É um evento padrão do JavaScript que ocorre quando todos os recursos da página, incluindo imagens, estilos, scripts e subframes, foram completamente carregados. Dessa forma, o window.onload é acionado relativamente mais tarde durante o ciclo de carregamento da página, pois espera que todo o conteúdo da página seja carregado.

Este evento é útil quando você precisa garantir que todos os recursos da página sejam carregados antes de executar seu código, especialmente quando você precisa acessar elementos específicos da página ou realizar operações que dependem do carregamento completo do conteúdo.

window.onload = function() {
    // Código a ser executado quando a página e todos os recursos forem carregados
    // Aqui você pode realizar ações que dependem do carregamento completo do conteúdo.
};

Em resumo, o $ ( document).ready() é especificamente para jQuery e é acionado assim que o DOM está pronto para ser manipulado, enquanto o window.onload é um evento JavaScript padrão que é acionado após o carregamento completo da página.