Evento domready de Mootools
O framework Javascript Mootools define um evento que vamos utilizar infinitas vezes ao longo do
Manual de Mootools. Este método pode ser associado ao objeto window, para executar ações quando o DOM tiver sido completamente carregado e estiver pronto para poder fazer qualquer tipo de ações com ele.
Quando temos o DOM Ready (DOM pronto)
Bom, sabemos que uma página tem um código HTML e ademais uma série de elementos externos, que se carregam à parte do próprio código da página. Se nossa página é longa e contém diversas imagens, scripts, declarações de estilos ou outros elementos que tenham certo peso, pode demorar um bom tempo até terminar de carregar tudo.
Nas aplicações web que têm componentes do lado do cliente, que se executam mediante Javascript, muitas vezes se têm que criar funções de iniciação desses componentes, para inseri-los na página, posicioná-los, etc. Por exemplo, poderíamos desejar executar ações Javascript para realizar um carregamento de dados por Ajax ou para gerar conteúdos dinâmicos na página, inserindo elementos como uma barra de navegação gerada automaticamente, um calendário ou o que possamos necessitar.
Todos estes componentes que se devem inserir dinamicamente em uma página, em teoria, devem ser incluídos quando o navegador está preparado para recebê-los. Isto é, quando o DOM (a hierarquia de objetos do navegador a disposição de Javascript para alterar os elementos da página) está completamente carregado no navegador e pronto para ser alterado.
Quem conhece as bases de Javascript saberá que existe um evento "onload", que serve para executar ações quando se termina o carregamento da página. Porém, este evento se executa quando TODOS os elementos da página tiverem terminado de se carregar, ou seja, a própria página e tudo o que tiver, como imagens, banners e outro tipo de recursos externos. Portanto, se nossa página tem, por exemplo, muitas imagens pesadas, pode ser que onload demore muito em se executar e até então não se mostrariam os elementos que se desejam inserir dinamicamente.
Porém, muito antes de finalizar esse carregamento de elementos externos, a página poderia ter estado pronta para executar ações Javascript que alterem o DOM. Teoricamente, quando uma página termina de se carregar e se processar, mesmo que continuem baixando imagens ou elementos externos, o DOM estará pronto para realizar ações.
Como utilizar o evento domready de mootools
Espero que as explicações anteriores tenham sido entendidas. Resumindo, domready é um evento que se executa quando a página está pronta para realizar ações que afetem ao DOM, ou seja, quando o DOM está pronto. Deve ficar claro que o DOM pode estar pronto muito antes de terminarem de carregar todos os elementos da página, sobretudo se a página tem imagens ou elementos externos que ocupem muito espaço em bytes.
Então, para executar ações quando o DOM estiver pronto em Mootools se faz isto:
window.addEvent('domready', function() {
//aqui as ações que quiser realizar quando o DOM estiver pronto
alert ("Agora o DOM está pronto");
});
Isso é tudo. Simplesmente com este código podemos incluir todas as ações que necessitarmos para executá-las só no momento que o DOM estiver pronto.
|
Importante: O evento domready só se pode utilizar com o objeto window do navegador. Para sua referência, a declaração do evento domready se encontra dentro do pacote Utilities/DomReady.
|
Aqui se pode
ver um exemplo de uso do evento domready de mootools.
