Preloader para una aplicación ajax

#1 (**permalink**) 12/07/2010, 22:31

HOLA A TODOS
Y GRACIAS DE ANTEMANO ...

ESTE PRUEBA CONSTA SOLO DE UN INDEX DONDE SOLO TENGO UNA BARRA DE NAVEGACIÓN Y UN CONTENEDOR, EN EL CUAL SE CARGAN HTML EXTERNOS MEDIANTE LOS ENLACES DE LA BARRA DE NAVEGACION:

.::INDEX::.

Código:

<script type="text/javascript" src="js/jquery.js"></script> 
$(document).ready(function() {
	
     $('#nav a').click(function() {
     var url=$(this).attr('href');
     $('#show').load(url);
     return false;
  });
			
});
</script>
</head>

<body>
<ul id="nav">
   <li><a href="uno.html">1</a></li>
   <li><a href="dos.html">2</a></li>
   <li><a href="tres.html">3</a></li>
   <li><a href="cuatro.html">4</a></li>
   <li><a href="cinco.html">5</a></li>
</ul>
<div id="show"></div>

LO QUE QUIERO BÁSICAMENTE ES QUE CUANDO HAGA CLICK EN ALGÚN ENLACE DE "#nav" APAREZCA UN PRELOADER (grafico o con porcentaje si es que se pudiera) EN EL CONTENEDOR (#show), MIENTRAS QUE AJAX HACE LA LLAMADA Y CARGA EL HTML EXTERNO EN DICHO CONTENEDOR (#show)

DESPUES DE CARGADO EL HTML EXTERNO ESTE PERLOADER TENDRÍA QUE DESAPARCER¡¡¡

ESPERO QUE PUEDAN AYUDARME...

rojaswilmer · #2 (**permalink**) 12/07/2010, 22:42

Para eso usa el metodo ajaxStart y colocas la imagen dentro de $('#show')

http://api.jquery.com/ajaxStart/