O Evento onload do JavaScript

Neste tutorial, vamos te ensinar a usar o evento mais simples e fácil de todos, o onload.

Fazer download da apostila e estudar offline

Atributo do evento onload

O onload é um atributo que usamos quando queremos disparar um evento quando qualquer elemento tenha sido carregado.

Ele tem a seguinte sintaxe:

<elemento onload="ação">

E já usamos ele aqui algumas vezes, então quem está seguindo e fazendo o curso completinho, já está bem familiarizado com ele.

Ele tem um funcionamento bem simples: quando tudo do elemento <elemento> tiver sido carregado, ele vai disparar a ação, que geralmente é uma função do JavaScript. Sem mistério.

Usamos muito da seguinte maneira:

<body onload="main">
corpo do site...
</body>

Assim, quando o corpo do site estava totalmente carregado (incluindo imagens, scripts, arquivos de estilo CSS etc).

Você pode usar o atributo onload em outros elementos, como uma div ou parágrafo.

Lembre-se que ele vai disparar o evento somente quando terminar de carregar tudo...assim, se seu elemento faz chamadas de um script ou uma imagem e esse carregamento demore, vai demorar também a disparar o evento onload, ok?

Checando se os Cookies estão ativos

onload inline

Vamos te mostrar um script bem simples, que exibe se os cookies de um navegador estão ativos ou não.

Se estiverem, a propriedade cookieEnabled do objeto navigator (navegador) tem o valor booleano de true, e caso os cookies estejam desativados, é false.

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body onload="checaCookie()">
  Checando permissão de cookies...
 </body>
</html>

script.js:

function checaCookie()
{
   if (navigator.cookieEnabled == true)
      alert("Cookies permitidos")
   else
      alert("Cookies bloqueados")
}

onload externo

Muitos programadores preferem não misturar código JavaScript com HTML.
No caso anterior, é inline porque passamos a função checaCookie dentro do código HTML, pro atributo onload da tag <body>.

Podemos separar totalmente o código JavaScript do HTML adicionando uma única linha ao nosso arquivo scripg.js:
document.onload = checaCookie();

Ou seja, usando o objeto document, o evento é disparado quando a árvore DOM é totalmente carregada. Veja como fica nosso código agora:

HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  Checando permissão de cookies...
 </body>
</html>

script.js:

function checaCookie()
{
   if (navigator.cookieEnabled == true)
      alert("Cookies permitidos")
   else
      alert("Cookies bloqueados")
}

document.onload = checaCookie();

Mais organizado, não?

Vale lembrar que isso vale para qualquer elemento que você desejar, ok?
Por exemplo, um script que é ativado quando a imagem imagem.jpg terminar de carregar, seria:

<img src="foto.jpg" onload="imagemCarregada()" width="200" height="264">

<script>
function imagemCarregada() {
  alert("Imagem completamente carregada!");
}
</script>

Leia mais sobre isso em:
https://www.w3schools.com/jsref/event_onload.asp

JavaScript Progressivo