Efecto loading con jquery (forma simple)

8 marzo, 2010 at 20:26

Este ejemplo no tiene nada de novedoso, ya lo habrán visto en muchas web implementado. Tiempo atrás había relaizado ya este efecto utilizando jquery como framework ajax para conseguir el efecto sin mayores complicaciones, hoy respondiendo a la petición de un amigo me vi obligado a reescribir el código dado que si bien está el efecto en la red la implementación es bastante más compleja que la que escribí yo. Puedes observar la poca cantidad de código que utiliza esta alternativa para mostrar el efecto de loading,  Ver Ejemplo

Source:

<html>
<head>
<title>Ejemplo prueba loading ajax</title>
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js‘></script>
<script type=»text/javascript»>
         function  efecto(){
$(‘#fotocargando’).hide();
$(‘#contenidoWeb’).fadeIn(500);
}

</script>
</head>
<body onload=»efecto();»>

<div id=»fotocargando» style=»width:100%;text-align: center;»>
<img src=»http://www.lacosox.org/sites/default/files/cargando.gif»>
</div>

<div id=»contenidoWeb» style=»display:none;«>
Bienvenido a Lacosox.org, ejemplo simple de carga ajax <br>
<img src=»http://www.lacosox.org/sites/default/files/plazacuracautin.jpg»>
<div>

</body>
</html>

 

Ver Ejemplo Funcional

cargando
Título: cargando (0 click)
Leyenda:
Filename: cargando.gif
Size: 3 KB
ejemplo_simple_carga_ajax
Título: ejemplo_simple_carga_ajax (0 click)
Leyenda:
Filename: ejemplo_simple_carga_ajax.html
Size: 888 B
plazacuracautin
Título: plazacuracautin (0 click)
Leyenda:
Filename: plazacuracautin.jpg
Size: 61 KB