Mostrar gif cargando mientras se carga una imagen

[..::MaRcOs::..]

Hola
soy muy nuevo en ajax, tengo una galeria de imagenes pero a veces
tarda en cargar y me gustaria q mientras este cargando mostrara una imagen
de loading algo como esto...



luego de cargada la foto quite el gif anterior y me muestre la foto
antes lo habia echo con css colocando el gif como fondo y centrado
horizontal y vertical pero no me da un buen resultado
lez agradezco mucho me colaboren...

[caricatos]

Hola:

En principio no tiene que ver con akax sino con javascript "clásico", lo que deberías hacer es poner con estilos una capa superpuesta a la imagen y con el manejador de eventos "onload" de la misma ocultar esa capa...

Más o menos esto:

Código:

<div id="contenedor" style="width: 107px; height: 98px; border: 1px solid red; position: relative" >
<img src="http://www.caricatos.net/dibujos/cpu.png" onload="this.nextSibling.style.display = 'none'" style="position: absolute"/><div style="background: white url(http://www.caricatos.net/dibujos/indicator.gif) no-repeat center center; position: absolute; top: 0; left: 0; width: 100%; height: 100%"></div>
</div>

Saludos

[..::MaRcOs::..]

gracias por tu respuesta, prove tu codigo y funciona perfecto
pero lo inclui en mi codigo y sale el cargando en toda la
pagina no solo en la imagen intente cuadrar las dimensiones de
la capa pero nada, este es mi codigo como lo integro hay?

Código PHP:

  <?php
    $query = ("SELECT * FROM galeria ORDER BY RAND() limit 1"); 
    $result = mysql_query( $query );
    while( $datos = mysql_fetch_array( $result ) ) { 
    echo'<div id="portadacon"><a href="fotos/'.$datos[id].'">
    <img src="foto.php?id='.$datos[id].'" width="155" border="0" alt="" id="portadafoto">
    </a></div>';}
    ?>   

incluyendo el codigo

Código PHP:

  <?php
    $query = ("SELECT * FROM galeria ORDER BY RAND() limit 1"); 
    $result = mysql_query( $query );
    while( $datos = mysql_fetch_array( $result ) ) { 
    echo'<div id="portadacon" style="width: 107px; height: 98px; border: 1px solid red; position: relative"><a href="fotos/'.$datos[id].'">
    <img src="foto.php?id='.$datos[id].'" width="155" border="0" alt="" id="portadafoto" onload="this.nextSibling.style.display = 'none'" style="position: absolute"><div style="background: white url(http://www.caricatos.net/dibujos/indicator.gif) no-repeat center center; position: absolute; top: 0; left: 0; width: 100%; height: 100%">
    </a></div>';}
    ?>   

primero q todo me sale error de sintaxis por 'none' y lo otro es q el div
de el gif no sale en la imagen si no en toda la pantalla :(

[GatorV]

Tema trasladado a Javascript.

[buzu]

lo del none te sale por las comillas. ponlo asi: \'none\' Arregla eso y quizá se arregle lo otro. Por cierto, desactiva tu javascript y veras lo que pasa. Deberías buscar una forma mas amigable de hacerlo. Caricatos te dio una buena base a partir de la cual trabajar, pero no te conformes y busca la forma en que cumplas con buenas normas de usabilidad y accesibilidad mas que nada.

[eldan2002]

a mi si se me muestra, pero no en el explorer, :`(