Показывать изображение во время загрузки страницы

Моя веб-страница использует несколько API-интерфейсов, и общее время процесса загрузки страницы составляет около 8 секунд. Я хочу показать изображение загрузки страницы во время загрузки страницы. Может быть, как будто вся страница затемнена, и показано изображение, которое представляет загрузку страницы, и как только страница загрузится, я хочу вернуться на свою страницу. Как я могу показать эту функциональность на сайте php?

Немного больше информации: страница даже не загружается, пока все визуализации на странице не загрузятся полностью. Другими словами, URL-адрес страницы не меняется даже при нажатии на ссылку. Как только ссылка меняется, веб-страница загружается, поэтому какое-либо решение или причина, почему это происходит?

Я на самом деле использую класс GAPI для получения аналитической ленты Google и использую API визуализации Google для отображения изображений. Я использую несколько GAPI для разных вызовов параметров данных, так как одна определенная комбинация не будет работать в одной команде...

образец:

$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);

Возвращенные значения хранятся в массиве и используются для API визуализации Google.

Каждый из них хранится в отдельных файлах, и я вызываю их, используя include ();

Источник

4 ответа

Решение

Используйте 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>

Прямо под телом начальный тег ставится...

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

Вы можете создать несколько gif-файлов с загрузкой ajax здесь... http://www.ajaxload.info/

Добавить этот CSS...

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

Обновить

Замените этим кодом JS, оставьте строку googlecode.

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

Надеюсь, поможет.

Источник

Используйте следующую функцию:

<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>
Источник

Это на самом деле не php. Но вы можете сделать следующее:

Добавьте следующее в раздел head:

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

Изменить <body> в <body onLoad="wait();">

и добавьте следующее в начале раздела тела:

<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>
Источник

Ну, на этом пути мало вопросов.

Прежде всего, вы выводите html для отображения экрана загрузки и запускаете команду flush(). Убедитесь, что у вас нет сжатия gzip в php или apache, так как содержимое не будет отправлено в браузер.

Затем вы должны помолиться, чтобы браузер был достаточно умен, чтобы рендерить его, а не ждать xxx КБ данных до следующего рендеринга.

В любом случае, я бы потратил больше времени на оптимизацию. Или сделайте легкую главную страницу и сделайте все остальное через AJAX.

Источник
Другие вопросы по тегам