Как подгружать страницы без перезагрузки на чистом js с прогрессом?

Question

[Анастасия]

Здравствуйте. Хочу сделать возможность загружать страницы без перезагрузки и чтобы можно было посмотреть прогресс загрузки этой страницы.
Делаю кнопку:

<button onclick="send(event, 'req.html')">Загрузить</button>

И вот такую функцию:

function send(event, html){
console.log("Отправка запроса");
event.preventDefault ? event.preventDefault() : event.returnValue = false;
var req = new XMLHttpRequest();
req.open('POST', html, true);
req.onload = function() {
  if (req.status >= 200 && req.status < 400) {
        document.querySelector(".result").insertAdjacentHTML("afterbegin", this.response);
} else {alert("Ошибка сервера. Номер: "+req.status);}}; 

req.onerror = function() {alert("Ошибка отправки запроса");};
req.send();
}

Проблема в том, что req.onprogress отрабатывает только на запрос, а не на содержимое документа. Ведь запрос возвращает мне только текст того документа, а в тексте находятся изображения. Грубо говоря страница req.html выглядит так:

<img src="big1.png" alt="">
<img src="big2.png" alt="">
<img src="big3.png" alt="">

Как можно повесить прогресс на всю страницу из запроса?

Comments

[Олех]

req.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        const percentComplete = evt.loaded / evt.total;
        //Выводим процент загрузки, тут и можем запустить функцию показа progress bar
        console.log(percentComplete);
      }
    }, false);

[Анастасия]

Олех, перечитай внимательно вопрос. this.response хранит лишь текстовую составляющую html страницы. Он не хранит изображения. Поэтому прогресс отработает быстро, несмотря на то, что сама страница с учётом изображений может весить 20мб.

Answer 1

[Александр]

Можно так (А вообще есть <iframe>).

const getPage = async url => {
    const request = new Request(url, {
        method: 'GET',
        headers: new Headers({ 'Content-Type': 'text/html; charset=utf-8' }),
    });
    const response = await fetch(request);
    const text = await response.text();
    const parser = new DOMParser();
    const virtualDocument = parser.parseFromString(text, 'text/html');

    return virtualDocument;
};

getPage('some.html').then(virtualDocument => {
    document.querySelector('.result').append(...virtualDocument.body.children);
});