» Início » Programação » Javascript » Preloader de imagens com javascript
 
Avaliação: | Publicado em: 05/08/2007
Preloader de imagens com javascript
Michael Mafort Programador PHP, ActionScript, Javascript, atua na área de internet a 2 anos desenvolve sistemas de interação entre flash e php, como o site http://www.tomplay.com.br de ensino musical a distancia. Apaixonado por web desde o primeiro contato, programador por hobby, profissão, paixão e muito gosto.


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.

Arquivos anexos ao artigo

Walter Brazolin <walter_brazolin@yahoo.com.br>
Legal a matéria cara! Muito bom mesmo!

Olha, dica para a próxima matéria. Ensine criar um telão, igual aquele que tem no ig, que fica passando os destaques do site.

Eu procuro a mais de um ano, e já muita gente procurando, muita gente mesmo.

Abraço!
Eduardo Moreno <web.great@hotmail.com>
Michael, fiz tudo certinho e no iE 7 funcionou normal, mas no firefox nao!
Seria bom se funcionasse....
xgfdhdasbcafdsfwd <vdsgegvsdfg>
seu idiota michael burro feio
seu magrelo horrivel safado cachorro.faz o trabalho direitooo
um meu orkut e paginas da net

nao q abri e qdo abre elas fica tudo estranha nao da pra manda recados no orkut e fala q da erro e fala deste javascript oq precizo faze se alguem poder me ajdar ficarei grato rafa_deltrejo@hotmail.com


seus idiotas, não sabem usar, então não reclamem, façam melhor. testei aqui e funciono no IE e no FF. bando de burros invejosos.