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?

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!