Mostrando una rueda de progreso mientras carga la página

Necesito una rueda de progreso para mostrar mientras se realizan muchas consultas de base de datos y cURL de terceros mientras el usuario espera.Mostrando una rueda de progreso mientras carga la página

¿Debería mostrar la rueda de progreso por sí sola de inmediato, o debo mostrarla una vez que la plantilla de página (pero no el contenido) se haya cargado?

¿Debo mostrar una rueda de progreso hasta que el HTML/javascript de la página termine de cargarse o cuando el PHP termine de cargarse?

Si pudieras mostrar en código sin formato cómo la mayoría de la gente hace esto, sería genial. Estoy usando jQuery y este es un sitio PHP.

Fuente

2011-03-25 babonk

muestra la barra de progreso hasta que la respuesta php (el valor devuelto puede ser HTML uno) no se carga en javascript.

"¿Debo mostrar una rueda de avance hasta de la página HTML/Javascript se hace carga, o cuando el PHP se hace carga?"

Sí a este enfoque

Una vez completada la carga, la carga ocultar usando jQuery y poner el contenido en el recipiente a clase.

<div class="loading"> 
</div> 
<div id="container"> 
</div> 



$('.loading') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    });

Fuente

2011-03-25 02:09:11

¿Cuál? ¿Cuándo termina el PHP o cuándo termina el renderizado de HTML/javascript? – babonk

muestra la barra de progreso hasta que, la respuesta php (valor devuelto) no se carga en javascript. –

Esta es una técnica común muy y el proceso es bastante estándar. Deberá mostrar el gráfico solo cuando se vaya a realizar una solicitud. Esto significa configurar el gráfico para mostrar ninguno en su CSS. Esto es significativamente mejor que usar JavaScript por razones de compatibilidad y rendimiento percibido.

Puede ver aquí He creado un gráfico de carga, agregado en jQuery, y atado un evento asíncrono que se produce en un clic arbitrario. El gráfico se muestra antes de que se realice la conexión y luego se oculta cuando se completa la solicitud. Usas completo en caso de que los errores de respuesta salgan.

<head> <style> .slider { display: none; }</style> </head> 
<body> 
    <div class="slider"><img src="someslidergraphic.gif"></div> 

    <script src="http://code.jquery.com/jquery.js"></script> 
    <script> 
    jQuery(function($) { 
     // The animation slider cached for readability/performance   
     var slider = $(".slider"); 

     // Arbitrary event  
     $("body").bind('click', function() { 
     // Show graphic before ajax 
     slider.show(); 

     // Fetch content from PHP 
     $.ajax({ 
      // Setings 
      ... 
      'complete': function() { 
      // Hide during complete 
      slider.hide(); 

      // Rest of code after request 
      ... 
      } 
     }); 
    }); 
    </script> 
</body>

Fuente

2011-03-25 02:29:39 tbranyen

Mostrando una rueda de progreso mientras carga la página

Respuesta

Cuestiones relacionadas