Algumas vezes precisamos recuperar, em tempo de execução, o tamanho de uma determinada imagem para aplica-la corretamente ao layout da página, porém essa verificação pode acontecer antes da hora, o que geraria erros inesperados.
Todo mundo que trabalha com a biblioteca jQuery conhece a chamada:
$(document).ready({
//seu código javascript
});
Ela diz ao browser para executar o bloco interno somente quando o DOM do seu documento tiver sido totalmente carregado, isso permite que ele faça o parser de seu documento utilizando os seletores sem esquecer de nenhum item. Porém quando carregamos estruturas externas ao DOM, como uma imagem, não temos garantia de que o código dentro do bloco anterior será executado quando a imagem já tiver sido carregada.
Dessa maneira, caso você precise de informações sobre a imagem, seu script falhará.
Para contornar isso, podemos utilizar uma outra chamada, que é disparada somente quando TODO o documento tiver sido carregado:
$(window).load({
//seu código javascript
});
As duas diferenças, além do comportamento são:
- Saí o ‘seletor’ document para a entrada do window;
- Saí o evento ready para a entrada do load;
A primeira alteração ocorre por conta da segunda, já que o evento load não pode ser associado a um document.
Com essa pequena alteração você garante que seu script rodará apenas quando todo o documento tiver sido carregado – o que é essencial em algumas situações, como a citada anteriormente, porém dispensável na maioria das vezes.