[Java Script] - Preloader em JavaScript

Um exemplo de preloader de imagem feito em Javascript:

Código:

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:

Código:

<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.


Ver Exemplo