Neste post, veremos como executar código JavaScript após o carregamento da página usando JS e jQuery puros.
JavaScript e jQuery library oferece várias maneiras de executar uma função após o DOM estar pronto. Este post fornece uma visão detalhada dos métodos para realizar isto.
JavaScript
Em JavaScript puro, o método padrão para detectar uma página totalmente carregada é usar a propriedade onload event handler. O evento de carga indica que todos os ativos da página web foram carregados. Isto pode ser chamado com o window.onload em JavaScript.
|
1
2
3
|
janela.onload = function() {
alert(‘Página carregada’);
};
> |
Editar no JSFiddle
O seguinte código usa o método addEventListener() para ouvir o evento load para detectar uma página totalmente carregada. Isto é equivalente ao código acima.
|
1
2
3
|
janela.addEventListener(“carregar”, função() {
alerta(‘Página carregada’);
});
|
Editar no JSFiddle
Embora não seja recomendado, você também pode chamar uma função JavaScript no carregamento da página usando HTML <body> tag. A idéia é usar o atributo onload na tag do corpo.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=”loaded();”></body>
<script>
function loaded() {
alert(‘Página carregada’);
}
</script>
</html>
> |
Editar no JSFiddle
Nota, que o evento DOMContentLoaded seria mais apropriado se você precisasse apenas do seu código para executar quando o DOM estiver totalmente carregado, sem esperar por folhas de estilo e imagens para terminar o carregamento.
|
1
2
3
|
documento.addEventListener(“DOMContentLoaded”, function() {
alerta(‘Página carregada’);
});
> |
Editar em JSFiddle
jQuery
Com jQuery, você pode executar o código JavaScript assim que o DOM estiver totalmente carregado usando o método .ready() que é equivalente a window.onload em JavaScript. Qualquer uma das seguintes sintaxes pode ser usada, que são todas iguais:
- $(document).ready(handler)
- $(“document”).ready(handler)
- $().ready(handler)
|
1
2
3>
|
$(document).ready(function() {
alert(‘Página carregada’);
});
|
Editar no JSFiddle
Alternativamente, $(handler) pode ser chamado o que é equivalente à sintaxe acima:
|
1
2
3
|
$(function() {
alerta(‘Página carregada’);
});
|
Editar no JSFiddle
Você também pode assistir ao evento load no objeto window usando o método $(window).on("load", handler).
|
1
2
3
|
$(janela).bind(‘load’, function() {
alert(‘Página carregada’);
});
|
Editar no JSFiddle