@knocker83

Как правильно реализовать preloader c %-ом загрузки страницы?

Мне нужна помощь в реализации %-ого preloader-а.

Я раньше делал вот таким образом, но мне нужно узнать % загрузки страницы, как это сделать?

$(window).on('load', setTimeout(function () {
  $preloader = $('.preloader'),
  $preloader.hide('slide',{ direction: "down" }, 800);
}, 1400));


Через $.ajax не получается вычислить %, вычисляет 2 раза 77% и 100%
$.ajax({
  xhr: function () {
     var xhr = new window.XMLHttpRequest();
     xhr.upload.addEventListener("progress", function (evt) {
         if (evt.lengthComputable) {
             var percentComplete = evt.loaded / evt.total;
             console.log("upload: " + percentComplete);
         }
     }, false);
     xhr.addEventListener("progress", function (evt) {
         if (evt.lengthComputable) {
             var percentComplete = evt.loaded / evt.total;
             console.log("download: " + percentComplete);
         }
     }, false);
     return xhr;
   },
  success: function(){
  },
  type: 'GET',
  url: "/"
});


И через вот эту ссылку тоже, здесь не понятно что вводить oReq.open();
https://developer.mozilla.org/en-US/docs/Web/API/X...
  • Вопрос задан
  • 941 просмотр
Решения вопроса 1
kellas
@kellas
веб-разработчик
Сложно. Посмотри исходники github.hubspot.com/pace/docs/welcome
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
agmegadeth
@agmegadeth
Веб-разработчик в дизайн студии
твой аякс описывает загрузку файла, а не загрузку страницы. Никакой инструмент не даст тебе точного процента загрузки страницы. Можно сделать видимость подсчета.
Например, чаще всего изображения грузятся дольше всего. Поэтому имеет смысл подсчитать кол-во изображений на странице, и после каждой успешной загрузки картинки высчитывать процент загруженных изображений от общего кол-ва. Вот и будет примерный процент загрузки страницы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы