All geek questions in one place

Show image while loading page

My webpage uses several api and the total page load time is about 8 seconds. I want to display a page load image during page load. It may seem that the whole page is fading and an image is displayed that represents the loading of the page, and as soon as the page loads, I want to return to my page. How can I show this functionality on php website?

A bit more information: The page does not load until all the visualizations on the page are fully loaded. In other words, the URL of the page does not even change as soon as the link is clicked. As soon as the link changes, the web page loads, so any solution or reason why this happens?

I really use the GAPI class to get the Google Analytics feed and use google javascript to display images. I use several GAPIs for different data parameter calls, since one specific combination does not work in one command ...

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 returned values ​​are stored in an array and are used to render google.

Each of them is stored in separate files, and I call them using include ();

+3
source share
4 answers

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>

Immediately after the tag, put the beginning of the tag ...

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

Here you can create gigabytes of ajax download ... http://www.ajaxload.info/

Add this CSS ...

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

Update

Replace this JS code, leave 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 this helps.

+7

:

<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>
+1

, .

, html flush(). , gzip php apache, .

, , , xxx kb .

, . AJAX.

0

This is not php. But you can do the following:

Add to the header 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 <body>to<body onLoad="wait();">

and add the following at the beginning of the 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>
0
source

Source: https://habr.com/ru/post/1760826/

More articles:


All Articles