OnReady, em javascript, sem uso de frameworks.

09Jan09

Para quem trabalha desenvolvendo sites de forma não obstrutiva, já precisou usar  muitas vezes o window.onload, certo?

Isso não tem nenhum problema de compatibilidade entre os browsers ou algo do tipo, mas tem um incoveniente. O script só é executado quando todos os elementos E imagens serem carregados.

Geralmente o que deixa um site pesado são as imagens, no caso de uma tela pesada com muitas imagens ou imagens grandes (em kb), o tempo de carregamento aumenta muito e muitas vezes o script não pode esperar tanto tempo.

Os frameworks já implementam esse onready, como o jQuery por exemplo.
Mas e se não quiser usar um framework no seu projeto ?

Há algumas soluções prontas na internet, já vi algumas muito boas como a do Micox.

Uma vez enquanto eu desenvolvia um projeto, pensei numa solução bem simples eacabei usando em alguns projetos sem frameworks, gostaria de compartilhar com vocês.

A minha idéia é a seguinte:

function ready(fn){
    var clock = setInterval(
        function(){
            if(document.body) {
                fn()
                return clearInterval(clock)
            }

        },1
    )
}

 

A idéia é repetir uma função indefinidas vezes testando se existe o objeto document.body.

Teóricamente só existirá o objeto quando todos os seus filhos tiverem sido criados.
No caso de existir, a função termina de executar o teste e executa uma função passada como parâmetro.

Embora a idéia de repetir algo infinitas vezes pareça um pouco intimidadora, penso que um possível loop infinito aconteça no caso do body não ter sua tag fechada (mas aí também né…), mas nunca testei isso.

Fiz alguns testes com alert para saber quantas vezes a função é executada e na maioria dos casos só repetia uma vez. Os objetos parecem ser criados muito rapidamente, antes do segundo milissegundo da repetição da função.

A forma de usar seria essa:

	ready(function(){
		alert( " Carreguei =) " )
	})

Dentro da função você colocaria qualquer comando ou outra função…

É essa minha idéia, se alguém achar algo de ruim poste, para tentarmos melhorar essa estratégia.

Aquele abraço.

Filed under: Idéias, Javascript   |  3 Comments