Javascript: Image Preloader

Ver post no novo domínio: http://blog.rogeriolino.com/2007/03/21/javascript-image-preloader/

Conforme prometido aqui um exemplo de preloader de imagem feito em Javascript:

Clique aqui para visualizar

var bgColor = “#FFFFFF”;
var bgImage = “http://www…/loading.gif”;
var bgRepeat = “no-repeat”;
var bgPosition = “center center”;
var borderWidth = “3px”;
var borderStyle = “solid”;
var borderColor = “#3366FF”;
//
var loadImage = function(w, h, url, target) {
var img = new Image(w, h);
img.src = url;
img.style.visibility = “hidden”;
var molde = document.createElement(“div”);
molde.setAttribute(“id”, “molde”);
var style = molde.style;
style.border = borderWidth+” “+borderStyle+” “+borderColor;
style.background = bgColor+” url(“+bgImage+”) “+bgRepeat+” “+bgPosition;
style.width = img.width+”px”;
style.height = img.height+”px”;
document.getElementById(target).appendChild(molde);
molde.appendChild(img);
img.onload = function() {
this.style.visibility = “visible”;
molde.style.background = bgColor;
}
}

Nesse caso ao invéz de aplicar o background na tag img, apliquei numa div que funciona como uma moldura. Esta de fácil personalização alterando as variáveis globais.

O código é de fácil entendimento, deixa-se a imagem transparente e quando ela carregada (onload) ela “volta” a ser visível.

Para usar coloque isso no HTML:

<script type=”text/javascript”>
var imagem = new loadImage(largura, altura, url, alvo);
</script>

largura, altura: largura e altura em pixel da imagem;
url: caminho completo da imagem, incluindo extensão;
alvo: id da tag aonde deverá ser adicionada a imagem.

Qualquer dúvida ou sugestão só comentar.

11 thoughts on “Javascript: Image Preloader

  1. Michael

    Ótimo, eu conhecia a técnica do CSS, mas quando temos uma imagem muito grande e queremos mostrá-la de uma vez sem ver ela carregando um loading em Js é melhor…
    Um exemplo é de um ambiente 3D que estou fazendo… onde o fundo é o site, ou seja uma área de trabalho… 800×600 (menos, obvio para caber no navegador) e quero que os links só funcionem se não tiver Js ou se o fundo carregou… ou seja, os links ficam lá com um CSS simples, depois o Js se encarrega ded remover e carregar a img de fundo… quando ela carregar, altero o CSS e recoloco os links.
    Muito interessante….

    Responder
  2. Pingback: Blog HotSync » Dica de blog

  3. hugo leonardo

    Caro Rogério, eu quase não conheço JS. Enconteri este seu tutorial pois estava procurando como criar e aplicar um preloader no site em flash q estou construindo.

    Eu não sei as alterações q tenho q fazer no código para utilizá-lo?
    Vc poderia me ajudar por favor?

    Por exemplo, meu arquivo do flash se chama “home.swf”, esta numa pasta chamada “surto” no diretório c:…no dreamweaver eu chamo o arquivo home.html (é o qual visualizo no teste do IE e Firefox). Todo o site está no mc fo flash “home.swf”, estou trabalhando com cenas. Como eu faço?
    Obrigado.

    Responder
  4. Pingback: CSS: Loading Image « Rogério Lino

  5. Guilherme

    Sugiro declarar sua função da seguinte forma:
    function loadImage(…){…}
    E chamar esta função no onload da div preloader, assim:
    [ div onload=loadImage(….,this) ]

    Desta forma você evita duas atribuições de variáveis (var loadImage e var image), além de evitar declarar um script dentro da div. Especialmente a declaração:
    var image = new loadImage(…)
    me parece desnecessária, pois a var image não precisa guardar nenhum retorno da função, portanto é melhor chamar a função direto.

    Me diga o que acha e por favor me corrija se eu estiver errado na sugestão. T+

    Responder
  6. Celso Junior

    Ótimo script Rogério. Eu o estou usando na minha web e ele funciona perfeitamente bem.

    Eu só coloquei o código num arquivo externo(onde está o seu crédito) porque prentendo usá-lo em muitas páginas. Então eu não vou ter que modificar página a página caso haja alguma alteração, não é mesmo?

    Obrigado.

    Talvez eu faça uma sessão de links de amigos na minha web. Sendo assim eu gostaria de saber se poderia colocar um link para o seu blog também.

    De qualquer jeito, um grade abraço.

    Responder
  7. pAsteL

    Boa tarde… bom.. aparentemente está ótimo o tutorial.. porém, eu não entendi muito bem como que irei aplicar o script na página…

    resumidamente, o site que quero inserir é assim:

    tem uma página chamada index.php
    nessa página, tenho query String para atualizar as páginas do site..
    tenho uma div chamada ‘conteúdo’.. que é a que recebe as páginas de acordo com que são solicitadas no menu…

    esse script, eu deve simplesmente copiá-lo e colocar num novo arquivo chamado loading.js
    Depois disso, na minha index, chamar o script?

    E como faço pra inserir na div que eu quero que apareça o loading?

    Tomara que eu tenha conseguido ser claro..
    abraços..

    Responder
  8. João Pedro

    tudo bem? Gostei muito do script, mas estou tendo alguns problemas para utiliza-lo em mais de uma imagem.

    Como estou trabalhando com varias imagens precisava de uma dica para fazer a imagem anterior sumir. Tipo:

    passo o mouse em um link >> uma miniatura aparece
    tiro o mouse do link >> a imagem desaparece

    passo o mouse em outro link >> e outra miniatura aparece
    tiro o mouse do link >> a imagem desaparece

    O problema é que ao utilizar o mouseout, as imagens não desaparecem e sim vão se amontoando. Tentei utilizar um removeChild mas acho que fiz algo errado. Teria como mostrar isso na prática ou me ajudar por onde começar? Obrigado!

    Responder

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s