Rogério Lino

CSS: Loading Image

Posted by: Rogério Alencar Lino Filho on: 16 Março, 2007

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:

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

[/update]

1 Resposta para "CSS: Loading Image"

Legal o seu post, eu fiz um muito parecido no meu blog. Gostei do seu blog, show de bola.

fuiii…

Deixe uma Resposta

Categorias