Efecto cargando, al dar click en enlace

[raxper]

Hola intenté hacerlo para cargar en el body me salió, pero necesito que funcione cuando le dé un click os publico el code para que me puedan entender.
¿Si tienes alguna idea publícalo ?, gracias :D

Código Javascript:

window.onload=function(){loading.style.display="none";
if(loading.style.display=="none"){contenido.style.display="block"}}
 

Código HTML:

<div id="loading" align="center"><img src="http://classhub.com/system/application/views/design/images/ajax_loading.gif" /></div>
 
<div id="contenido" align="center" style="display:none">
<img src="http://images.kaneva.com/filestore/1143991/1731381/Alucard.jpg">
</div>
 

[_cronos2]

La verdad es que esa función no tiene mucho sentido, pero bueno. El evento que necesitas es onclick.
Saludos.

[IsaBelM]

supongo que te refieres a cuando hagas clcik sobre un botón, enlace, ....

yo usaría el evento onload o la propiedad oncomplete y onerror. sólo has de cambiar el display del contenedor a block y cambiar el src de una imagen. es decir cambias la ruta de la imagen de carga

<div id="contenido" style="display:none;">
<img id="imagen" src="http://classhub.com/system/application/views/design/images/ajax_loading.gif" alt="" />
</div>

si son muchas imágenes, insertaría las rutas en un array (para hacer una precarga de imágenes ) y usaría el método addEventListener/attachEvent para invocar la función

<offtopic>me demoré demasiado</offtopic>

[raxper]

Iniciado por IsaBelM

supongo que te refieres a cuando hagas clcik sobre un botón, enlace, ....

yo usaría el evento onload o la propiedad oncomplete y onerror. sólo has de cambiar el display del contenedor a block y cambiar el src de una imagen. es decir cambias la ruta de la imagen de carga



si son muchas imágenes, insertaría las rutas en un array (para hacer una precarga de imágenes ) y usaría el método addEventListener/attachEvent para invocar la función

<offtopic>me demoré demasiado</offtopic>

gracias isabel, por vuestra ayuda :D

Mientas tanto intentaba hacerlo y la forma que me ocurrió fue style.

Código Javascript:

function a(b){contenido.innerHTML="<iframe style='background:url(http://classhub.com/system/application/views/design/images/ajax_loading.gif) no-repeat center;' width='500' height='600' frameborder='0' src="+b.name+"></iframe>"}
 

Código HTML:

<img src="http://classhub.com/system/application/views/design/images/ajax_loading.gif" style="visibility:hidden">
<div align="center" id="contenido"></div>
 
 
 
<a onclick="a(this)" name="http://www.w3schools.com">Schools</a>
<a onclick="a(this)" name="http://yahoo.com">Yahoo!</a>