Tag Archives: image

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.

CSS: Loading Image

Podemos simular um pré-carregamento de uma imagem utilizando a propriedade CSS background setando um outra imagem, na qual informará o carregamento da imagem.

img {
background: #ffffff url(loading.gif) no-repeat center center;
}

E pronto, mas uma observação um tanto lógica e óbvia que deve se fazer é sobre o tamanho da imagem de fundo, que deve ser pequena para ser mostrada rapidamente.

Aqui você vê um exemplo

Uma maneira mais útil de utilizar isso seria com javascript com a função onLoad para só mostrar a imagem depois dela totalmente carregada.

Liberando um tempo vago darei um update nesse post com o exemplo já utilizando javascript.

[update]

Link para o exemplo com Javascript:

https://rogeriolino.wordpress.com/2007/03/21/javascript-image-preloader/

[/update]