Avaliação: | Publicado em: 05/08/2007

Preloader de imagens com javascript

Michael Mafort Michael Mafort é Sócio e Diretor de Tecnologia da Criasol Desenvolvimento web [www.criasol.com.br]. Por ser apaixonado por programação traz aqui conteúdos de relevância para iniciantes, intermediários e avançados em programação web. Mais informações http://www.michaelmafort.com/blog

Preloader de imagens com javascript

Olá a todos, este é o meu primeiro artigo no plugmasters, e gostaria de passar para vocês um pouco de javascript, neste primeiro artigo vamos falar sobre "Carregamento de imagens".

Nesta primeira parte vamos entender como funciona a nossa função.
Temos em nossa função 2 variáveis principais que são as variáveis current e images_arr.

A variável images_arr (linha 21, imagem preloader) é do tipo Array e contem nela todas as informações que você precisará inserir na imagem que será precarregada. O src é o caminho onde está localizada a imagem, pode ser relativo, como no exemplo que tudo esta na raiz (todos os arquivos estão na mesma pasta) e pode ser também absoluto como por exemplo: http://www.plugmasters.com.br/sys/templates/Plug/Images/plug_rodape.gif
Obs.: As informações de ID e ALT serão utilizadas num segundo artigo, aguardem.

A variável current (linha 14, imagem preloading_js ) é do tipo Number (apenas números) e inicia em 0 que define a posição inicial do carregamento das imagens no Array images_arr, assim quando iniciarmos o nosso script ele irá carregar a primeira imagem definida dentro do nosso array.

Vejamos o nosso script:

Imagem: preloading_js

Entendendo o script acima linha-a-linha:
23 - Função imgPreloader responsável por carregar as imagens
25 - Define uma nova variável "img" criando um novo elemento html para a imagem
27 - Define o valor do src da imagem
29 - Define o alt (alternative text, usado se a imagem não existir mais no servidor ele exibe o texto que vc definiu) da imagem
31 - Define o id para identificarmos esta imagem posteriormente.
Obs.: As linhas 29 e 31 terão suas utilidades especificadas no próximo artigo.
35 - Define uma nova função para ser chamada quando o carregamento da imagem terminar, desta forma a proxima imagem só será chamada quando a atual tiver totalmente carregada.
39 - Exibe uma mensagem para o usuário informando quantas imagens serão carregadas e quantas já foram carregadas. (isso não faz diferença no funcionamento do script, é apenas uma firulinha a mais)

50 - Função onLoadImg responsável por verificar se todas as imagens já foram carregadas e se não foi carrega a próxima
52 - Incrementa a varíável current com +1, definindo assim a próxima a ser carregada, seguindo a ordem do array images_arr.
56 - Condicional que verifica se todas as imagens já foram carregadas. (se a posição da imagem atual do array a ser carregada é menor que a quantidade total de imagens)
59 - Se a condição acima retornar verdadeiro ele chama a função imgPreloader passando a posição do array que deverá ser carregada.

Vejamos agora como implementar no HTML, veja a imagem abaixo:

Imagem: preloader

Entendendo o código linha-a-linha:
1 a 10 - Definições do HTML
11 - Chama o nosso script externo preLoading_js.js do tipo text/javascript para o nosso HTML
13 - Abre uma nova tag script do tipo text/javascript
21 - Cria a variável images_arr que é o array com o conteúdo a ser carregado
24 a 27 - Um novo array dentro do nosso array images_arr, este array contém as informações necessárias para o carregamento da imagem, sendo iniciado por chaves "{" e fechado com chaves "}", é importante notar a virgula "," no final destes arrays pois este é o caractere que identifica que iniciará um novo objeto. Veja a imagem abaixo exemplificando o funcionamento do array.
30 - Note que nesta linha não temos a virgula no final quando fechamos as chaves, pois não teremos nenhum outro objeto a ser incluido no nosso array.
31 - Fecha o nosso array usando colchetes "]".
33 - Chama a função imgPreloader com o parametro 0 que defini que o carregamento iniciará do primeiro registro do nosso array de imagens.
34 - Fecha a tag script iniciada na linha 13
35 a 37 - Definições do HTML.

Bom é isso ai, espero que seja útil.

Abraços e até a próxima.

• preloaderImages_js.zip

• 10 Dicas de CSS, parte 2
• 10 Dicas de CSS, parte 1
• 10 razões para NÃO fazer seu site de forma amadora