...">

How to check if php site is fully loaded using JS

So I have index.php where inside I have a Div like this:

<div id="thisDiv">
    <?php ?>
<div>

      

and in another JS file I have a divRefresh function like:

function divRefresh(id, path){
    $(id).load(path, function(){
        functionToBeCalledWhenLoaded();
    });
}

      

where id will be id from div and PATH is path to where php file is located on server.

My problem is the function load()

is calling functionToBeCalledWhenLoaded()

until even my page .php

has been fully loaded.

Solutions have tried:
callback functions.
inline <script>

. (This solution works only with some people)
the jquery ready()

, onload()

,load()

How can I check if my php page has been fully loaded before calling the JS function?

+3


source to share


2 answers


The DOM seems to be ready as long as the PHP server is still sending data. Here are some tips that can convince the browser to understand the situation. Try turning it off and on again first. If that doesn't work:

Suggestion 1

Try sending header("Content-Length: ...")

- this might convince the browser to wait for all the data to be sent. Of course ... is the byte size of the generated HTML.

Proposition 2

Try using output buffering:

<?php ob_start();?>
<div id="thisDiv">
    <?php ?>
<div>
<?php ob_end_flush();?>

      

The server will wait for the html to be fully generated and then it will send it to the client, so the latest data will be there ...</html>

, after which the DOM will be ready and after that the JS loading will start. At least I hope so.



Proposition 3

At the end of the php code you put inside thisDiv

, insert this line

<img src="pixel.gif" onload="functionToBeCalledWhenLoaded()">

      

Where pixel.gif is a real 1px invisible image, so the function runs after the php part finishes. This can work when the DOM is ready and the relevant data is sent and the browser is waiting for some more data.


Last but not least, it could be a cache issue. As a last resort, you can use setTimeout(functionToBeCalledWhenLoaded,1000)

to wait another second and hope that the page is actually ready after the delay. This would be a good example of a struggle with flowing tape, desperate despair.

+2


source


If you are using jQuery you can put your code between:

$(document).ready(function() { }

or an abbreviated version $(function(){ }



If you are not using jquery:

window.onload = function(){ }

+1


source







All Articles