Как сделать предварительный загрузчик до того, как веб-страница будет загружена?

Я хотел бы сделать панель предварительного натяжения, которая показывает, насколько загружается страница, прежде чем она будет полностью загружена (что-то вроде pushcollective.com, обратите внимание на верхний бар до полной загрузки страницы).Как сделать предварительный загрузчик до того, как веб-страница будет загружена?

Как я могу добиться чего-то подобного? Я предполагаю, что сначала направил пользователя на страницу загрузки и запросил страницу с помощью AJAX и поместил запрошенный контент в div после того, как он закончил загрузку. Но я не думаю, что это чистое решение?

источник

2013-10-09 user2002495

Ваше предлагаемое решение по использованию облегченной страницы, чтобы сделать запросы AJAX для контента, обновить ход по мере получения каждого бита, а затем собрать и отобразить контент, является хорошим. Почему вы думаете, что это не «чистый»? – Yuck

показать прогрессбар и * подделку * процент загружен, затем, когда это будет сделана загрузка, быстро закончите панель нагрузки и покажите контент. –

@Yuck: потому что это просто идея, и я действительно не знаю, как это сделать, может быть, я не должен использовать слово в конце концов, моя ошибка, английский не мой основной язык – user2002495

лично я бы не думать о том, что я собираюсь предложить, как о «чистой» решения, однако здесь другой подход без дополнительного вызова AJAX для загрузки страницы:

Раздельное содержание вашего сайта на две части : индикатор выполнения и все остальное (это будет фактическое содержимое страницы). Индикатор выполнения никогда не заканчивается, логарифмически заполняя. Логика заполнения должна находиться в теге, расположенном сразу после вашего индикатора выполнения внутри. Таким образом, он начнет работать до того, как все будет загружено, но после появления индикатора выполнения.

Сделать блок «фактического содержания» скрытым изначально. Подпишитесь на событие DOM Ready. Когда он срабатывает, скройте ход и покажите контент. Или вы можете показать полный прогресс за раскол секунды, а затем скрыть его.

Я не думаю об этом как о «чистом», потому что он не отражает реального прогресса, но, похоже, это не так, как вы упомянули.

источник

2013-10-09 15:42:17

спасибо, но это точно первое, что пришло мне в голову, я выбрасываю его, потому что мне нужно показать реальный прогресс. – user2002495

Если вам действительно нужен фактический прогресс, тогда единственный вариант, который я вижу, - это сделать следующее. Зная более или менее точно содержание страницы во время разработки, вы можете отметить некоторые точки страницы, чтобы использовать их в качестве этапов загрузки.Затем в сценарии, который я описал в ответе, вы можете опросить эти этапы, используя 'document.getElementById' или другие средства для проверки того, были ли они загружены в DOM. Когда они есть, вы соответствующим образом перемещаете индикатор выполнения. Он будет работать, но я лично выбрал бы логарифмически заполненный индикатор прогресса. –

Сайт, на который вы предоставили ссылку (http://pushcollective.com/), использует NProgress.js plugin. Насколько я мог исследовать, он использует случайные значения, чтобы увеличить индикатор выполнения (IMHO - не очень изящное решение, но я думаю, что это возможно).
Вот отрывок из плагинов кода:

/** 
* Increments by a random amount. 
*/ 

    NProgress.inc = function(amount) { 
    var n = NProgress.status; 

    if (!n) { 
     return NProgress.start(); 
    } else { 
     if (typeof amount !== 'number') { 
     amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95); 
     } 

     n = clamp(n + amount, 0, 0.994); 
     return NProgress.set(n); 
    } 
    };

источник

2013-10-09 15:49:46 matewka

Недавно я наткнулся с этим простым и легким в использовании плагин для JQuery называют PreLoadMe, я считаю, это лучший до сих пор:

http://niklausgerber.com/blog/preloadme-a-lightweight-jquery-website-preloader/

источник

2014-01-27 12:58:25

Ну, я закончил с pacejs, это довольно круто, легко использовать и легко настроить. Вы, ребята, можете проверить это here, спасибо за весь ответ.

источник

2014-04-15 11:16:11 user2002495