Cómo hacer un preloader

neodani · #1 (**permalink**) 30/07/2010, 09:02

Buenas,

Me gustaría cargar unos datos de una página web y mientras se cargan me gustaría mostrar el tipico mensaje de cargando.

Lo he probado de muchas maneras pero no consigo que funcione correctamente.

Podéis decirme que hago mal?

Código Javascript:

Ver original<html>
<head>
<title>PRELOADER 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style>
 
 
</style>
<script language="javascript">
 
$('#boton_cargar').click(function(){
    $("#seccion").load("pagina-lenta.php",function(){
        $('#loading').fadeOut('slow', function() {
            $(this).remove();
        });
    });
});
  
 
$('#loading')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).fadeIn('slow')
        $(this).animate({opacity: 1.0}, 3000)
    })
    .ajaxStop(function() {
        $(this).fadeOut('slow', function() {
            $(this).remove();
        });
});
</script>
</head>
<body>
 
<div id="loading">Cargando.....</div>
 
<a href="#" id="boton_cargar">Cargar datos</a>
<div id="seccion"></div>
 
 
</body>
</html>

Muchas gracias de antemano!

neodani · #2 (**permalink**) 30/07/2010, 09:40

Qué opináis de esta forma?

Es funcional

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
    body, h1 {
        font-family: Verdana, Arial, Helvetica, sans-serif; 
        font-size: 0.8em;
    }
    a {
        text-decoration: none;  
        color: #333;
    }
    a:hover {
        color: #ff0000;
    }
    
    #ajax-content {
        height: auto; 
        width: 400px;
        border: 5px solid #ccc; 
        margin: 0 auto; 
        padding: 10px;
    }
    #loading {
        width: 66px; 
        margin: 0 auto;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
 
<script>
$(document).ready(function(){
    $("#loading").css("display", "none");
    $("#ajax-content").css("display", "none");
    $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#loading").css("display", "inline");
      $("#ajax-content").css("display", "none");
      $("#ajax-content").load("test.php", function(){
         $("#loading").css("display", "none");
         $("#ajax-content").css("display", "block");
      });
   });
})
</script>
<title>PRELOADER 2</title>
</head>
 
<body>
<a href="#" id="enlaceajax">Haz clic!</a>
        <div id="loading">
            <img src="generator.php.gif" alt="content is loading" width="100" height="100" />
        </div>
        
        <div id="ajax-content"></div>
</body>
</html>

Rosencrantz · #3 (**permalink**) 30/07/2010, 12:52

Código:

$('#miBoton').click(function(){

$('#divContenedorAjax').html('<img src='img/preloader.gif' alt='cargando'/> Cargando... ');


$('#divContenedorAjax').load('paginaDatos.php');

return false;

});

Inicialmente colocamos algun trozo de codigo html dentro del contenedor en este caso la imagen del preloader la cual debe existir previamente, despues hacemos un load a ese contenedor, este load me reemplazara el preloader que estamos mostrando con el codigo que traemos de la pagina php.

neodani · #4 (**permalink**) 30/07/2010, 15:13

Cita:

Iniciado por Rosencrantz

Código:

$('#miBoton').click(function(){

$('#divContenedorAjax').html('<img src='img/preloader.gif' alt='cargando'/> Cargando... ');


$('#divContenedorAjax').load('paginaDatos.php');

return false;

});

Inicialmente colocamos algun trozo de codigo html dentro del contenedor en este caso la imagen del preloader la cual debe existir previamente, despues hacemos un load a ese contenedor, este load me reemplazara el preloader que estamos mostrando con el codigo que traemos de la pagina php.

Woow Rosencrantz! me has dejado O_o! sí que se puede simplificar!

Lo he probado y funciona a la perfección... de la manera que lo hacia yo era complicarse la vida cosa barbara, no?

Código Javascript:

Ver original$(document).ready(function(){
    $("#loading").css("display", "none");
    $("#ajax-content").css("display", "none");
    $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#loading").css("display", "inline");
      $("#ajax-content").css("display", "none");
      $("#ajax-content").load("test.php", function(){
         $("#loading").css("display", "none");
         $("#ajax-content").css("display", "block");
      });
   });
})

Muchas gracias

Rosencrantz · #5 (**permalink**) 31/07/2010, 07:59

A veces nos complicamos más de lo necesario, pero lo importante es aprender y tener ganas, me alegra que te haya servido.

Saludos.

jvmjunior · #6 (**permalink**) 23/12/2010, 06:58

A mi no me funciona :(

Me sale un cuadro blanco nada mas, no se entiende el código :(

Dany_s · #7 (**permalink**) 23/12/2010, 09:34

Cita:

Iniciado por jvmjunior

A mi no me funciona :(

debe ser por las comillas en los atributos de img cambialas a dobles o el de apertura a dobles y los atributos a simples

proba asi

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>
        $(function(){
            $('button').click(function(){
                $('body').html('<b>Cargando...</b>').load('pagina.html');
                return false;
            });
        });
        </script>
    </head>
    <body>
        <button>Click</button>
    </body>
</html>