Можно ли получить прогресс загрузки элементов веб-страницы в процентах?

Question

Когда веб-страница загружается впервые, браузер загружает изображения, JavaScript, CSS и другие ресурсы.Я хочу измерить прогресс загрузки по (%) нотациям.

Для создания этого скрипта я исследовал JavaScript window.onload, но я не получил требуемые свойства и методы.

function load() {
    var preload = document.querySelector('#magic-box');
    preload.style.display="none";
}

window.onload = load;

window.onload достаточно для создания простого прелоадера для веб-страницы.В GitHub & Codepen есть много процентных предзагрузчиков.Но они не рассчитывают абсолютный процент, они модифицированы и статичны.Если мы можем измерить прогресс загрузки элементов веб-страниц, мы можем сделать крутой и крутой прелоадер

Answer 1

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

В качестве примера этот сайт

let xhr = new XMLHttpRequest();

// 2. Configure it: GET-request for the URL /article/.../load
xhr.open('GET', '/article/xmlhttprequest/example/load');

// 3. Send the request over the network
xhr.send();

// 4. This will be called after the response is received
xhr.onload = function() {
  if (xhr.status != 200) { // analyze HTTP status of the response
    alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
  } else { // show the result
    alert(`Done, got ${xhr.response.length} bytes`); // responseText is the server
  }
};

xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    console.log(`Received ${event.loaded} of ${event.total} bytes progress -> ${(event.loaded/event.total * 100)}%`);
  } else {
    console.log(`Received ${event.loaded} bytes`); // no Content-Length
  }

};

xhr.onerror = function() {
  alert("Request failed");
};

xhr.onprogress - это та часть, где можно отслеживать прогресс.

Answer 2

Проверьте среднюю задержку, затем используйте это время для загрузки в процентах.По истечении этого времени установите ваше состояние загруженным