There is some way to load JavaScript before PHP

3

Before someone throws me around the neck I have to say that I know that PHP is loaded on the server and builds the page, that after this the client loads the resulting HTML with its JavaScript and its events.

Having said that, I would like to know if there is any method to load JavaScript before PHP .

This idea comes from the following problem. I have a script that shows the typical "Loading ..." dialog. When queries PHP are not very heavy it does not take long to be shown while the HTML is loaded.

This would be the structure of 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>

In the case of having a% heavy%, the page remains loading a good time but does not show the loading message, because as mentioned at the beginning PHP load before PHP .

As you can see a minute of waiting can be very heavy for the user and even more if you do not have any message that the page is loading.

I have researched a bit and most say that loading JavaScript before JavaScript is impossible, but maybe there is some way to load the page in a structured way leaving the heavier for the end (I do not know if it is possible or not).

Note: As an alternative solution, we have considered looking for a PHP plugin that shows this dialog. So I also accept answers with the use of other plugins.

    
asked by Lombarda Arda 26.06.2017 в 09:56
source

3 answers

8

Short answer: Unable to load JS before PHP.

Long answer: You'll have to simulate it using AJAX.

In summary, you launch the HTML with the loader and without PHP, and by Ajax (in the document.ready) you call a PHP that renders the content of your page, once you receive the PHP response, you include the content in your page in the body and close the dialogue. This is the basic principle of the SPA (Single-Page Application).

    
answered by 26.06.2017 / 10:33
source
3

As you put it, it is impossible. As you indicate in your question, the general process that follows the execution of your page is the following:

  • An HTTP request is made to your server from the client when accessing a web address.
  • The web server receives that request and processes it. If, as is the case, this request involves the execution of PHP code, the server executes said PHP code generating a text file (HTML document) which also contains Javascript code.
  • This HTML text document is sent back to the client, who interprets it through the browser executing it from top to bottom.
  • In this way, the PHP code is always executed in the server phase, and the server never executes the Javascript code that is inside the HTML document generated by the server. Therefore the PHP code always runs on the server before returning the generated text document to the client and it executes all the code that contains

    To be able to achieve what you propose you must, from the client and using Javascript, capture the event that generates the HTTP request to the server (for example, click on a link) and, before making the request manually, execute the code javascript display of the wait. In this way, the waiting message would be executed until the HTTP request obtained a response, at which time the resulting document generated in the server would be loaded in the browser.

    You can also solve it using AJAX requests so that they modify the part of the HTML document generated by PHP. Before executing the AJAX request, you execute the Javascript display code of the wait and, when you obtain the AJAX response, you modify the part of the document that was processed with PHP and stop the execution of the display of the wait.

        
    answered by 26.06.2017 в 10:47
    0

    Depending on the buffer implemented by the server, some proxy, or the client itself (browser). This technique that is discussed in the php manual may or may not work. link . is basically sending pieces of html emptying the php buffer and take advantage of the browser's rendering engine that will try to show what it has in parts (with funny cases like the tables in some versions of ie that do not show complete until it closes the table)

    It is a technique that is very dependent on the technology involved, but can be useful in controlled environments.

    I leave an example taken from the manual php with a variant to show a javascript pulling console.logs every n seconds

    <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();
    
    ?>
    

    tested on apache (ubuntu) and chrome (win)

    php adapted from: link

    javascript adapted from: link

        
    answered by 03.04.2018 в 04:53