Executando códigos jQuery ao carregar a página

28/07/2008 foi a data do meu último artigo publicado no iMasters. É quase um ano e sinceramente: estou com muitas saudades de vocês. Saudações.

Nesse meu retorno decidi focar em dois assuntos: jQuery e WordPress. Num primeiro momento, vamos iniciar pela a biblioteca JavaScript↳JavaScript116 conteúdosJavaScript em 2020: O que esperarDev (Back & Front) · jan 2020Campos públicos e privados em classes JavaScript – O que vem por aí no ESNextDev (Back & Front) · abr 201929 anos de JavaScript!Dev (Back & Front) · jan 2025Ver tudo em Dev (Back & Front) → onde escrevemos menos e fazemos mais. Sim, a jQuery.

Se você fizer uma busca no iMasters por jQuery encontrará bons artigos e dentre eles um que recomendo a leitura: Visão geral sobre o JQuery de autoria do Mauricio Samy.

Meu objetivo é escrever uma série partindo do princípio e avançando a cada publicação. Vamos agradar gregos e troianos fazendo alusão aos iniciantes e experientes, aos designers e programadores. Vamos lá.

Existem diversas maneiras de executar um código jQuery ao carregar uma página web. Embora todos tenham o mesmo objetivo: executar tal código, se faz necessário reconhecer essas maneiras e saber como usá-las.

O problemático código abaixo é antigo e foi muito utilizado por programadores JavaScript até a proliferação das bibliotecas JavaScript como a jQuery. Observe-o:

window.onload = function() {<br />	// códigos JavaScript a serem executados quando a página carregar<br />}

O objetivo é simples: executar uma função quando a página carregar por completo. O problema: os códigos são executados somente quando as imagens também forrem carregadas. E isso inclui os banners, milhares de fotos, ícones, dentre outros. #fail.

Em 99.99% dos casos, os códigos JavaScript precisam ser carregados quando o DOM (Document Object Model) está pronto para ser lido e manipulado. Ciente disso, a jQuery possui o método Ready. Pronto em tradução livre. E é tal método que utilizamos hoje para substituir o problemático código apresentando anteriormente.

O grande lance da jQuery é selecionar algo e fazer alguma coisa com esse algo. Se precisamos executar um código ao carregar a página, logo teremos que selecionar o documento e executar os códigos necessários quando ele estiver a nossa disposição. Segue exemplo:

$(document).ready(function(){<br />	// códigos jQuery a serem executados quando a página carregar<br /> });

A grande diferença entre esse código e o apresentado anteriormente, se resume ao fato de os códigos serem executados sem a necessidade de aguardar o carregamento das imagens relacionadas à página. O que nos garante uma maior confiança em atender os anseios dos usuários frente aos recursos desenvolvidos e dependentes de códigos JavaScript num site ou aplicação.

O código acima ainda pode ser reescrito de uma forma abreviada e mais simples. Veja:

jQuery(function($) {<br />	// Códigos jQuery a serem executados quando a página carregar usando o pseudônimo (alias) $ de forma a não conflitar com outras bibliotecas JavaScript.<br />});

ou assim:

$(function() {<br />	// Códigos jQuery a serem executados quando a página carregar e correndo o risco de conflitar com outras bibliotecas JavaScript<br />});

Nos exemplos acima observamos uma abreviação em invocar o método Ready da jQuery. Eles se diferenciam pela forma como são chamados. No primeiro exemplo usamos jQuery e no segundo o famoso $. Esse último é comumente utilizado em bibliotecas JavaScript o que pode resultar num conflito em nome de funções quando há várias bibliotecas inseridas numa mesma página. Logo, é uma melhor prática adotar a primeira opção no lugar da segunda.

Se ainda preferir a segunda opção, considere escrevê-la assim:

( function($) {<br />	$(function() {<br />		// códigos jQuery a serem executados quando a página carregar <br />	});<br />})(jQuery);

Isto é, passamos o objeto jQuery à função e assim podemos usar o pseudônimo (alias) que quisermos. No exemplo, utilizamos o famigerado $.

Para finalizar, um modelo de organização de código jQuery que tenho adotado e estou a compartilhar com vocês.

( function($) {<br />	$(function() {<br />		iMasters.init();<br />	});<br />	var iMasters = {<br />		init : function() {<br />			// Execute seus códigos iniciais<br />			// ...<br /><br />			// Chame as funções desejadas...<br />			iMasters.outraFuncao();<br />		},<br />		outraFuncao : function() {<br />			// Códigos desejados...<br />		}<br />	};<br />})(jQuery);

Com esse artigo espero ter apresentado e explicado algumas formas de executar códigos jQuery ao carregar a página. Forte abraço e me siga @leandrovieira.

PS. Aguardo sugestões de artigos. Assim terei uma noção sobre qual caminho seguir. Conto com vocês.