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]

2 thoughts on “CSS: Loading Image

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