Как узнать процент на сколько загрузилась страница и присвоить это значение переменной?

Question

[IliaNeverov]

Доброго времени суток! Подскажите как узнать процент на сколько загрузилась страница и присвоить это значение переменной?

Comments

[Lynn «Кофеман»]

В общем случае никак

Обычно все эти загрузчики просто фейк

Answer 1

[SaNFeeD]

Я бы попробовал так, как только заходят на страницу запускается функция
setInterval(() => {}, 30);
в которой все время прибавляется к полосе прогресса, например, по пикселю, попутно с этим проверяется document.readyState и если оно будет равно interactive то прогресс переходит заполняется на 2/3. Затем останавливаем интервал и ждем ответа следующей функции.
window.onload = function(){};
как только она сработает, плавно дотягиваем прогресс до конца и закрываем прелоадер.

Можете почитать про события загрузки

Comments

[G F]

Мне нравится надо будет попробовать

Answer 2

[Otrivin]

На бэке рассчитать вес каждого подключаемого ресурса в gz, передать в data-атрибут (хоть в байтах, хоть в процентах); на фронте обойти все эти ресурсы, рассчитывая общий вес, затем вешать слушателя на onload каждого из них и считать. Переменную можно использовать глобальную, window['awesomeCounter']

Для оптимизации использовать кэш + прописать атрибут заранее, если ресурсы статические

Answer 3

[hellcaster]

Есть один, но костыльный метод. Найти все фотографии, видео (можно скрипты, стили и другое) на странице (all), и при загрузке (добавить к каждому обработчик событий onLoad) добавлять +1 количеству загружённых файлов (loaded) и подсчитывать процент (loaded * 100 / all);

Пример от Howdy Ho (только с фото) (когда он еще снимал обучающие видео, а не динозаврика в 3D)