Developing

jQuery – .ready

Introduction

Quando estamos aprendendo jQuery ou javascript é normal aprendermos que o evento .ready() é chamado quando a página é carregada por completo, porém, este conceito não está correto. O evento .ready() é executado basicamente quando a estrutura do documento foi carregada, ou seja, o DOM foi completamente carregado.

Syntax

jQuery(document).ready(function() {
// Code
});

.ready()

Muitos pensam que o evento ready é executado quando a página é carregada por completo, porém, esse pensamento não está certo.

O javascript tem nativamente um método que é executado quando a página está carregada por completo, e esse método é o window.onload, que muitas vezes utilizamos na tag body através do evento onload. O método ready do jQuery não substitui esse método, e nem é executado no mesmo instante.

Para um navegador a página está totalmente carregada quando todos os recursos da página estão carregados, e isso inclui todos os arquivos externos, como scripts, música e imagens. Apenas quando todos os recursos estão carregados o navegador invoca o evento load , ou seja, caso a página esteja carregando um script ou uma imagem muito grande, dependendo do navegador, toda a página pode ser exibida, porém, o load pode não ser chamado ainda. (Obs.: Dependendo do navegador porque existem alguns navegadores que só exibem a página quando todos os recursos da página estão carregados em memória).

Diferente do load, o ready executa quando a estrutura do documento está pronta, ou seja, quando o DOM foi carregado por inteiro, mesmo que os recursos da página, como scripts e imagens, ainda não tenham sido carregados. Isso pode acontecer porque muitos navegadores modernos carregam os recursos de forma assíncrona, ou seja, exibe a página, apenas com CSS e texto, por exemplo, e vai carregando imagens paralelamente, sem impedir que o usuário possa começar a ler o conteúdo da página.

Veja um comentário que Frederico Batista fez (em 30/09/2010) sobre um caso em que a utilização do evento .ready() não é uma boa opção:

Já aconteceu comigo de utilizar um plugin JQuery que carregava os scripts necessários por demanda, e muitas vezes, ao chamar a criação do plugin no método ready, era retornado o erro O objeto não dá suporte para a propriedade ou método, isso porque o arquivo que continha o plugin que eu tentava chamar ainda não estava carregado. Portanto, se você carrega arquivos de forma dinâmica, o ready não é uma boa opção.

Caso seja realmente interessante carregar scripts dinamicamente, crie métodos com callbacks que indiquem que os arquivos já foram carregados, para ai sim você poder atribuir eventos e plugins aos controles.

jQuery .ready Others Syntaxis

jQuery().ready(function() {
    // Code
});
jQuery(function() {
    // Code
});

jQuery Page Events

O jQuery porve pelo menos três métodos para trabalharmos com o carregamento de página. São eles:

References

api.jQuery – .ready()

Frederico Batista – Entendendo o JQuery ready() e live()

Also View

jQuery – Dialog

jQuery – Disable HTML Controls

jQuery – Themes List at Google Code

javascript – ReplaceAt

ASP.NET – Validation of viewstate MAC failed

_____

Não se esqueça de deixar seu comentário, critica, elogio, dúvida e etc. Ele é muito importante para a melhoria do blog.
Do not forget to leave your comments, criticism, praise, questions, etc.. It is very important for improving the blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: