html page loading message

Question

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

<script type="text/javascript"> 
    $(document).ready(function(){ 
     //my jquery here.... 

    }); 
</script> 

Answer 1

Создайте страницу с уже загруженным сообщением, чтобы при загрузке страницы с сервера сообщение уже показывалось.

Затем, используя JQuery, вы можете скрыть сообщение, как только страница готова:

$(document).ready(function(){ 
    $('#loadingMessage').hide(); 
}); 

Answer 2

Hm, вы можете загрузить изображение, которое говорит «загрузка», а затем загрузить остальные скрипты документа либо делать что-то вроде:

var TM_script = document.createElement('script');TM_script.src = 'http://www.yoursite.com/script.js';document.getElementsByTagName('body')[0].appendChild(TM_script); someFunctionInScript(); 

в качестве альтернативы, вы можете просто загрузить изображение, а затем представить Ajax запросы на загрузку остальной части страницы. Вы также можете попробовать сделать анимированный gif или другое изображение в верхней части страницы, и как только документ загрузится (и ваш скрипт активируется), удалите это изображение.

Answer 3

http://www.jsfiddle.net/dactivo/m4Bxe/

window.onload = function() { 

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

    }; 

window.onload будет ждать всю загрузку страницы. ready() ожидает, что DOM будет готов, что практически является промежуточным.

Вы можете прочитать в these jquery docs

«В то время как JavaScript обеспечивает нагрузку событие для выполнения кода, когда страница оказывается, это событие не получает срабатывает до тех пор, все активы, такие как изображений не было В большинстве случаев скрипт может быть запущен , как только будет построена иерархия DOM . Обработчик прошел до .ready() гарантированно будет , выполненный после того, как DOM готов, "

Answer 4

Метод Джастина будет делать трюк.

убедитесь, что вы оптимизируете путь ресурсы загружены, например, положить ваши скрипты в нижней части страницы, так что они не блокируют HTML рендеринга

http://developer.yahoo.com/performance/rules.html

Answer 5

есть фоновое изображение, установленное с помощью css в тело и удалить элемент в документе.готовый

Answer 6

Я знаю, что это довольно старая нить, но ниже решение работал для меня, хотя JQuery нужно:

Первый сразу после тега тела добавить следующее:

<div id="loading"> 
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> 
</div> 

Затем добавьте класс стиля для DIV и изображений на ваш CSS:

#loading { 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    position: fixed; 
    display: block; 
    opacity: 0.7; 
    background-color: #fff; 
    z-index: 99; 
    text-align: center; 
} 

#loading-image { 
    position: absolute; 
    top: 100px; 
    left: 240px; 
    z-index: 100; 
} 

и, наконец, добавить JavaScript на свою страницу (желательно в конце вашей страницы, до закрытия тела тега конечно):

<script language="javascript" type="text/javascript"> 
$(window).load(function() { 
$('#loading').hide(); }); 
</script> 

Затем отрегулируйте положение загружаемого изображения и цвета фона загрузочного div по классу стиля.

Это он, работает отлично. Но, конечно, вы должны иметь ajax-loader.gif где-то.

Попробуйте AJAXLoad Они имеют некоторые большие анимированные GIF там .. :)