Como usar .ready() antes de incluir a jQuery

Aprenda como usar o .ready() da jQuery até mesmo antes de incluir a própria jQuery, que permite executar códigos inline que dependem da bilbioteca mesmo antes de ela ser incluída! Saiba mais!

Uma das mais “tradicionais” regras de performance de sites é colocar as chamadas para javascripts externos no final do documento HTML, antes do fechamento da tag body. Mas não são raras as ocasiões em que nós, desenvolvedores web, precisamos inserir códigos que dependem da jQuery no meio do documento (posição que fica antes do indicado para se chamar a própria jQuery). Como proceder?

[baseado article_name=”Safely Using .ready() Before Including jQuery” article_link=”http://blog.colin-gourlay.com/blog/2012/02/safely-using-ready-before-including-jquery/” site_name=”Colin Gourlay Blog” site_link=”http://blog.colin-gourlay.com/”]

Antes de continuarmos, é importante saber que existem diferentes sintaxes possíveis para “ativar” o jQuery:

E existe solução para usar .ready() antes de incluir o jQuery?

Sim, existe solução para usar .ready() antes de incluir o jQuery e, felizmente, a solução é eficaz em todas essas possibilidades apresentadas – e, talvez, até em algumas outras, quem sabe…

Em termos práticos, a solução é:

Claro que não dá pra entender a lógica olhando script comprimidos. Vejamos o de head:

O script de body (imediatamente depois da jQuery):

Usa-se o $.each() para associar corretamente todos os handlers na fila para o DOM pronto, mas, porque $(document).bind(“ready”, handler) pode ter sido chamado antes, é preciso dar um bind, também, da maneira correta.

Exemplo de uso

OK, realmente é um pouco confuso de se entender de primeira, por isso, vejamos este exemplo de como usar o $.ready() antes da jQuery, seguido de suas respectivas saídas num console.

Exemplo:

Console:

Haha! Viu, só? Apesar de, no código, o scripts do “Exemplo D” ter sido o primeiro, na saída do console os exemplos executaram perfeitamente na ordem “A, B, C, D”!

Conclusão

E, com isso, vimos que é perfeitamente possível – e relativamente simples – usarmos chamadas ao .ready() da jQuery de forma “não ordenada”. Isso faz abrir um leque de possibilidades interessante, pense bem!

Se gostou e/ou tem alguma ideia de como usar isso para melhorar seus scripts, comente e compartilhe! Ajude a desenvolver a web!