4

My webpage is using some api's together and the total process time for the page to load is around 8 seconds. I want to show a page loading image while the page is loading. Could be like the whole page is dimmed out and an image is shown which represents the page loading and once the page loads i want to go back to my page. How can i show this functionality in a php website?

Little more info: The page is not even loading until all the visualizations in the page have completely loaded. In other words, the URL of the page is not even changing as soon as the link is clicked. As soon as the link is changing, the webpage is loaded, so any solution or reason why this is happening?

I am actually using GAPI class to get Google analytics feed and using google visualization javascript api to show the images. I am using multiple GAPI for different data parameter calls since one certain combinations wont work in one command...

a sample:

$pie->requestReportData(ga_profile_id,array('browser'),array('pageviews'),'-pageviews','',$start_date,$end_date,$start_index=1,$max_results=50); $ga->requestReportData(ga_profile_id,array('date'),array('visits','visitors'),'date','',$start_date,$end_date,$start_index=1,$max_results=50);

The values returned are stored in an array and used for google visualization api.

Each of this is stored in seperate files and i am calling them using include ();

tshepang
  • 12,111
  • 21
  • 91
  • 136
Scorpion King
  • 1,878
  • 8
  • 38
  • 45
  • Are you sure some caching wouldn't be in order? – Pekka Aug 20 '10 at 21:35
  • You can write small JavaScript code for it or use jQuery depending on your requirement. But this is definitely something PHP cannot do! – Aman Aug 20 '10 at 21:43

4 Answers4

9

Use jQuery...

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#loading").hide();
});
</script>

Right below body start tag put...

<img id="loading" alt="" src="ajax.gif"/>

You can create some ajax loading gifs here... http://www.ajaxload.info/

Add this CSS...

#loading{position:fixed;top:50%;left:50%;z-index:1104;}

Update

Replace with this JS code, leave the googlecode line.

<script type="text/javascript">
$(document).ready(function()
{
    $("#info").load("info.php");
    $("#linechart").load("linechart.php");
    $("#piechart").load("piechart.php");
    $("#loading").hide();
});
</script>

HTML:

<div id="#info"></div>
<div id="#linechart"></div>
<div id="#piechart"></div>

Hope it helps.

Dejan Marjanović
  • 19,244
  • 7
  • 52
  • 66
  • Where do i put the JQuery stuff? I just placed your jquery code on the first line of my webpage. This webpage does not have body tag in it. The site has only one template in index.php and every page that is clicked will load in the `` tag of the main index.php page. I hope i am clear. When i place this jquery code on my webpage, it is not loading at all. – Scorpion King Aug 20 '10 at 23:45
  • You need to load jQuery FW first, OK just copy&paste first code (I edited it). You have to put img anywhere in body, I'm sure you can do that. Change index.php. Third, add my CSS to your CSS file, that should be it. – Dejan Marjanović Aug 21 '10 at 00:21
  • Thanks webarto, it is working correctly, but the problem is that the page itself is not being called immediately. I have edited my original queesion, more info is present there. `include ('info.php'); include ('linechart.php'); include ('piechart.php');` These files contain the GAPI calls and Google visualization API. haivng multiple includes slows downs the process? – Scorpion King Aug 21 '10 at 01:16
  • You can load them async via jquery, that means your page loads, then onload you call these three files in three different DIVs via AJAX. You can then show loading gif, and after it is done, hide it. That's the way it should be done. – Dejan Marjanović Aug 21 '10 at 01:45
  • Look up below Update, try it that way, it is simple since you are new to jQuery I suppose. – Dejan Marjanović Aug 21 '10 at 01:51
  • yes it is true that i have no exp with jquery. This still is not working. The gif is showing but the google visualizations are not loading. For them to load i need to run the code present in these 3 files. I dont know if you are familiar with google visualization script or not. linechart.php has a GAPI class which gets data from google analytics and then this data is stored into an array and used in the javascript of GA and with this code `
    ` the output is shown in the webpage.     – Scorpion King Aug 21 '10 at 03:11
  • Oh, I understand, I thought that they are three independent files, you could try loading them separately, lets say only info.php a other two with include(), I really have no experience with this script so I can't really help like this. – Dejan Marjanović Aug 21 '10 at 03:21
1

Use the following function:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(window).load(function()

{

    $("#loading").hide();

});
</script>
Community
  • 1
  • 1
Amit bindal
  • 13
  • 1
  • 6
  • If you want to show loader image until your data being loading then you have to use window load function instead of document load function.Run both function and check difference in both functions. – Amit bindal May 02 '14 at 12:38
0

Well, there are few issues on this path.

First of all, you output html to show loading screen, and run flush() command. Ensure you do not have any gzip compression in php or apache, as content would not be sent to the browser.

Then, you have to pray that browser would be smart enough to render it and not wait for xxx kb of data till next render.

Anyway, I would invest more time in optimization. Or do a light main page and do the rest of functionality via AJAX.

BarsMonster
  • 6,483
  • 2
  • 34
  • 47
  • doing a lit version is not possible because this page has multiple visuals and api calls, that is how they wanted it... so the best option is to show an image. could you explain in more detail of your flush idea? – Scorpion King Aug 20 '10 at 21:39
0

This is not actually php. But you can do as follows:

Add the following to the head section:

<script type="text/javascript" language="javascript">
function wait()
{ 
    if(document.getElementById)
    {
        document.getElementById('waitpage').style.visibility='hidden';
    }
    else
    {
    if(document.layers)
    {
        document.waitpage.visibility = 'hidden';
    }
    else
    {
        document.all.waitpage.style.visibility = 'hidden';
    }
    }
}
</script>

Change the <body> to <body onLoad="wait();">

and add the following in the beginning of body section:

<div id="waitpage" style="left:0px; top:0px; position:absolute; layer-background-color:white; height:100%; width:100%;"> 
<table width="100%" height="100%">
    <tr>
        <td><img src="path-to-image"/></td>
    </tr>
</table>
</div>
Aman
  • 4,786
  • 1
  • 17
  • 17