Загрузка содержимого перед отображением в HTML5 - PullRequest
Новая
       0

Загрузка содержимого перед отображением в HTML5

0 голосов
/ 23 января 2012

Я занимаюсь разработкой журнала в Интернете и хочу узнать, возможно ли загрузить все содержимое (изображения, видео, DOM) в состояние готовности, прежде чем оно будет отображаться. Во время загрузки индикатор выполнения будет отображать ход загрузки содержимого. Большое спасибо!

Ответы [ 2 ]

3 голосов
/ 23 января 2012

Есть что-то вроде: 

<body>
     <div id="allcontent" style="display:none;"> 
          <!-- your entire page -->
     </div>
     <div id="progressbar">...</div>
</body>

А затем 

$(window).load(function() {
    $('#progressbar').remove();
    $('#allcontent').show();
});

РЕДАКТИРОВАТЬ : вы можете смоделировать прогресс, посчитав число $('img'), а затемвычисление процента уже загруженных изображений при каждом событии $('img').load.Это не идеально, но лучше, чем ничего

0 голосов
/ 23 января 2012

Я предлагаю решение, похожее на шаблон, с использованием определенного класса, примененного к элементу <html>. Смотрите мой пример скрипки: http://jsfiddle.net/tKtYd/

идея состоит в том, чтобы вскоре применить класс waitpageloadbeforedisplay через javascript в head, а затем использовать этот класс в CSS, чтобы скрыть оболочку основного сайта. Затем просто подождите, пока событие окна load удалит этот класс и покажет содержимое вашего сайта. Таким образом, контент по-прежнему доступен, даже если JavaScript не доступен / отключен.

Загрузчик отображается в виде фона тела с использованием правила css .waitpageloadbeforedisplay body (поэтому вам не нужно использовать разметку для стилизации).

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

Нет похожих вопросов

...