3

Antes de que alguien se me lance al cuello he de decir que se que PHP se carga en el servidor y construye la pagina, que después de esto el cliente carga el HTML resultante con su JavaScript y sus eventos.

Dicho esto, me gustaría saber si existe algún método para cargar JavaScript antes que PHP.

Esta idea viene del siguiente problema. Tengo un script que muestra el típico dialogo de "Cargando...". Cuando las consultas PHP no son muy pesadas no tarda mucho en ser mostrado mientras el HTML se carga.

Esta seria la estructura del script:

<html>
    <head>
        <script>
            waitingDialog.show('CARGANDO...', {dialogSize: 'sm', progressType: 'warning'});
        </script>
    </head>
    <?php
        //AQUI IRIA EL PHP COMPLETO
    ?>
    <body>
        ....
    </body>
    <script>
        $(document).ready(function() {
            waitingDialog.hide();
        });
    </script>
</html>

En el caso de tener un PHP pesado, la pagina permanece cargando un buen rato pero no muestra el mensaje de cargando, porque como se ha mencionado al principio PHP carga antes que JavaScript.

Carga

Como veis un minuto de espera puede ser muy pesado para el usuario y mas aun si no tiene ningún mensaje de que la pagina se esta cargando.

He investigado un poco y la mayoría dice que cargar JavaScript antes que PHP es imposible, pero a lo mejor hay alguna manera de que la carga de la pagina se haga de manera estructurada dejando lo mas pesado para el final (desconozco si es posible o no).

Nota: Como solución alternativa, se ha planteado buscar un plugin php que muestre este dialogo. Por lo que tambien acepto respuestas con el uso de otros plugins.

10
  • Porque no cargas el php en el body de un documento html que tenga el script mencionado en el header, de esta manera lo primero que cargara es el documento con el script. Lo unico que tendras que decir es, que cuando termine de cargar la página cierre el loader ese.
    – GDP
    Commented el 26 jun. 2017 a las 8:00
  • @GDP el script esta colocado por encima del PHP, pero como menciono en la pregunta. PHP carga en el lado servidor, por lo que se carga antes que JavaScript Commented el 26 jun. 2017 a las 8:03
  • Pero a lo que me refiero es: tienes un documento html convencional? digo que siga la estructura de: html->cabeza->script->cuerpo->cargar php
    – GDP
    Commented el 26 jun. 2017 a las 8:03
  • @GDP Veo que no entiendes el concepto, la estructura del HTML es la estructura tipica (He editado la pregunta para que se vea mas claro), pero la carga no es como tu dices, es cargar.php ->html->cabeza->script->cuerpo porque hay que tener en cuenta que lo primero en cargar es el entorno servidor, y despues el cliente. El php se encuentra en el servidor por lo que carga por delante que el resto. Commented el 26 jun. 2017 a las 8:09
  • 1
    Tendrás que hacerlo mediante AJAX. En resumen, lanzas el HTML con el loader y sin PHP, y por Ajax (en el document.ready) llamas a un PHP que renderice el contenido de tu pagina, una vez recibas la respuesta del PHP, incluyes el contenido en tu pagina en el body y cierras el dialogo. Esto es el principio basico de las SPA (Single-Page Application) Commented el 26 jun. 2017 a las 8:24

3 respuestas 3

8

Respuesta corta: No se puede cargar JS antes que PHP.

Respuesta larga: Tendrás que simularlo mediante AJAX.

En resumen, lanzas el HTML con el loader y sin PHP, y por Ajax (en el document.ready) llamas a un PHP que renderice el contenido de tu pagina, una vez recibas la respuesta del PHP, incluyes el contenido en tu pagina en el body y cierras el dialogo. Esto es el principio basico de las SPA (Single-Page Application).

2
  • A esto me referia yo XD
    – GDP
    Commented el 26 jun. 2017 a las 8:35
  • @GDP Tu me has preguntado sobre la estructura, en ningun momento te has referido a Ajax Commented el 26 jun. 2017 a las 8:37
3

Tal y como lo planteas es imposible. Como bien indicas en tu pregunta, el proceso general que sigue la ejecución de tu página es el siguiente:

  1. Se realiza una petición HTTP a tu servidor desde el cliente al acceder a una dirección web.
  2. El servidor web recibe esa petición y la procesa. Si, como es el caso, esa petición implica la ejecución de código PHP, el servidor ejecuta dicho código PHP generando un archivo de texto (documento HTML) el cual contiene además código Javascript.
  3. Dicho documento de texto HTML es enviado de vuelta al cliente, el cual a través del navegador lo interpreta ejecutándolo de arriba a abajo.

De esta manera, el código PHP se ejecuta siempre en la fase del servidor, y dicho servidor no ejecuta en ningún momento el código Javascript que se encuentra dentro del documento HTML generado por el servidor. Por lo tanto el código PHP se ejecuta siempre en el servidor antes de devolver el documento de texto generado al cliente y que éste ejecute todo el código que contiene

Para poder conseguir lo que te propones tienes que, desde el cliente y mediante Javascript, capturar el evento que genera la petición HTTP al servidor (por ejemplo pinchar en un enlace) y, antes de realizar la petición manualmente, ejecutar el código javascript de visualización de la espera. De este modo el mensaje de espera se ejecutaría hasta que la petición HTTP obtuviese una respuesta, momento en el cual se cargaría en el navegador el documento resultante generado en el servidor.

También puedes resolverlo mediante peticiones AJAX de manera que modifiquen la parte del documento HTML generado mediante PHP. Antes de realizar la petición AJAX, ejecutas el código Javascript de visualización de la espera y, cuando obtengas la respuesta AJAX, modificas la parte del documento que se procesó con PHP y paras la ejecución de la visualización de la espera.

1

Dependiendo de los buffer que implemente el servidor, algun proxy, o el cliente mismo (navegador). esta técnica que se discute en el manual php puede o no funcionar. http://php.net/manual/es/function.flush.php . es basicamente enviar pedazos de html vaciando el buffer de php y aprovechar el motor de render del navegador que intentará mostrar lo que tiene por partes (con casos divertidos como las tablas en algunas versiones de ie que no se muestran completas hasta que no se cierra la tabla)

Es una técnica que es muy dependiente de la tecnología involucrada, pero puede llegar a ser útil en ambientes controlados.

Te dejo un ejemplo sacado del manual php con una variante para mostrar un javascript tirando console.logs cada n segundos

<html>
<head>
  <title>Flush Example Page plus js timer countdown</title>
  <script>
    var i = 0;
    var funcNameHere = function(){
        if (i == 10) clearInterval(this);
        else console.log( 'Currently at ' + (i++) );
    };
    // This block will be executed 10 times.
    setInterval(funcNameHere, 1500);
    funcNameHere();
</script>
</head>
<?php ob_flush(); ?>
<?php flush(); ?>
<body>
<?php
if (ob_get_level() == 0) ob_start();
for ($i = 0; $i<10; $i++){

    echo "<br> Line to show.";
    echo str_pad('',4096)."\n";

    ob_flush();
    flush();
    sleep(2);
}

echo "Done.";
ob_end_flush();

?>

testeado en apache (ubuntu) y chrome(win)

php adaptado de: http://php.net/manual/es/function.flush.php#54841

javascript adaptado de: https://stackoverflow.com/a/26271149/1423096

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.