[SOLUCIONADO] Preload de Imagenes

[jonni09lo]

Hola amigos de Foros del Web, tengo el siguiente problema:

Deseo poder crear un preload de imagenes (tengo un sitio que tiene muchas imagenes), y necesito que cuando el usuario, cada vez que cargue la pagina y mientras se estén cargando las imagenes del sitio, en vez de mostrarse las imagenes, se vea un gif que muestre un loading, y que apenas termine de cargarse las imagenes se muestre ahora si las imagenes en vez del gif.

Se que el evento $(window).load() me puede servir para cuando termine de cargarse las imagenes, pero lo que no se es como mostrar ese gif, y después mostrar amenamente las imagenes

Desde ya gracias por sus respuestas

Saludos

[jmdearpe]

Hola, lo más sencillo es poner un css

Código HTML:

<style>
img
{
	background-repeat:no-repeat;
	background-position:center center;
	background-image:url('loading.gif');
}

</style> 

Peor claro entonces TODAS las imágenes antes de ser cargadas tendrán ese fondo de no ser que sobreescribas con style="background-image:none"

Tb puedes definir una clase css y aplicarla a las imágebes que quieres que tenga un fondo hasta que se carguen:

Código HTML:

<style>
.preload
{
	background-repeat:no-repeat;
	background-position:center center;
	background-image:url('loading.gif');
}

</style> 

Luego instancias con <img class="preload"> y a tirar :)


Saludos