Покажите изображение загрузки, пока страница загружается

Я хочу показать Loading изображение, когда страница еще не загружена. Перед загрузкой страницы отображается blank white page пользователю. Итак, я хочу удалить белое пустое пространство.

Страница делает слишком много обращений к базе данных, поэтому загружается немного медленно.

Я проверил этот пост, но это не работает.

Я проверил, добавив <![CDATA[ Infront из сценария, как это указано в блоге. Это не работает

Наконец я попал в "Задать вопрос", хотя это дубликат.

Вот мой сценарий, наконец.

<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
    // <![CDATA[
        $(window).load(function () {
            $("#divLoading").fadeOut("slow");
        });
    // ]]>
</script>

и в теле

<body style="background-color: white;">
    <div id='divLoading'>
        <div class="loading" align="center" id="divImageLoader">
            <img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/>  Loading 
        </div>
    </div>
</body>

CSS загрузки это:

.loading
{
    font-family: Arial;
    font-size: 10pt;
    padding:20px;
    position: fixed;
    background-color: #ffffff;
    z-index: 99999;
    border-radius:5px;

}

Что не так с моим кодом? Может кто-то указать или дать рабочее решение.

Ура!!!

Картик

Источник

1 ответ

Решение

Я получил решение этого вопроса.

Проблема не в высоте элемента div, а в проблеме изображений /CSS.

Проблема с другим script который выполняется сразу после завершения загрузки окна, скрипт включает в себя функцию DOM ready и оставшиеся функции javascript.

Я удалил следующий скрипт, который выполняется после window.load и помещен после конца тега body.

<body style="background-color: white;">
    <div id='divLoading'>
        <div class="loading" align="center" id="divImageLoader">
            <img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/>  Loading 
        </div>
    </div>
</body>
//The following second script is placed here so as to load after the body load is complete.
<script>
       includes DOM Ready, and some javascript functions to be called.
</script>

Предположение: думаю после $(window).load(function () { Сценарий завершен, другие сценарии не должны выполняться.

Спасибо всем, кто прокомментировал.

Если мое предположение неверно, пожалуйста, укажите, в чем реальная проблема, которая остановила loading изображение, чтобы показать.

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