ansaurus

Question

Answer 1

A:

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 2010-08-20 21:34:03

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 2010-08-20 21:39:38

Answer 2

A:

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 Kumar Jain 2010-08-20 21:37:05

Answer 3

A:

Use jQuery...

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
<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.

Webarto 2010-08-20 21:39:33

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 `<body>` 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 2010-08-20 23:45:44

Webarto 2010-08-21 00:21:45

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 2010-08-21 01:16:01

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.

Webarto 2010-08-21 01:45:17

Look up below Update, try it that way, it is simple since you are new to jQuery I suppose.

Webarto 2010-08-21 01:51:59

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 `<div id="chartname"></div>` the output is shown in the webpage.

Scorpion King 2010-08-21 03:11:36

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.

Webarto 2010-08-21 03:21:11

ansaurus

tags:

views:

answers:

show image while page is loading

related questions