¿Como crear una barra progresiva mientras dura una consulta a la base de datos?

adryan310 · #1 (**permalink**) 19/09/2012, 05:50

Hola y saludos a todos los visitantes de este foro, tengo la siguiente duda, como puedo mostrar una barra de progreso o un gif que haga esa funcion pero que se muestre durante el tiempo en que dura mysql en realizar una tarea en especifica, alguien sabe ese truco, ayuda por favorrr

...

Naahuel · #2 (**permalink**) 19/09/2012, 06:18

No estoy seguro si esto puede lograrse del lado del servidor solamente. Con AJAX, sí es más fácil y se hace todo el tiempo.

Sin embargo, no es tan fácil usar una barra de progreso pues esto requeriría saber de antemano el tiempo que durará la consulta. Entonces se usan los gifs giratorios o con barras que van y vuelven ( http://www.ajaxload.info/ ).

Otra opción (menos efectiva, más trabajosa) sería crear un script que haga muuuchas consultas y registre los tiempos de respuesta. Tomás el peor caso y estimas que eso es lo más que puede demorar y tomas ese tiempo para hacer tu barra de progreso. Si la consulta termina antes, hacés saltar la barra al 100% y listo. De nuevo, esto es más trabajoso y menos efectivo. Además, va a dar la impresión de que el sitio es más lento.

Te dejo un ejemplo MUY básico, usando un poquito de jQuery (que facilita las consultas AJAX y la creación y manipulación de elementos del DOM)

index.php

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //crear gif y ocultarlo
        $loading = $('<img src="loading.gif" id="loading" />').hide();
        //agregarlo al body
        $('body').append($loading);
        
        $('#consultar').click(function(e){
            e.preventDefault();
            $_elem = $(this);
            
            //hacer la consulta
            $loading.show() //mostramos el gif
            $.ajax({
                url: 'consultame.php'
            }).done(function(resultado){
                //ocultamos el gif
                $loading.hide();
                
                //agregar el resultado, luego del link
                $_elem.after(resultado);
            });
        });
        
    });
</script>
<style type="text/css">
    <!--
    #loading{
        position: fixed;
        left: 50%;
        top: 50%;
    }
    -->
</style>
 
<title>Ejemplo de ajax</title>
</head>
<body>
    <a href="#" id="consultar">Consultar</a>
</body>
</html>

consultame.php

Código PHP:

Ver original<?php 
    //emulamos una consulta a la base de datos
    sleep(1);
    echo '<p>Resultado!</p>';
?>

Ver funcionando: http://nahueljose.com.ar/ejemplos/ajax-test/01/

adryan310 · #3 (**permalink**) 19/09/2012, 06:31

¡Oye! esta bn chiva eso del la imagen gif eso s lo que quiero, pero ahora mi duda es como llamar esa funcion al finalizar un form y de que manera puedo mostrarlo centrado y que sea con un efecto bonito osea que opaque el contenido de la pagina y muestre solo la barra luego redireccione a una que yo le diga, puedes ayudarme amigo ? gracias x tus respuestas