Здравствуйте. Хочу сделать возможность загружать страницы без перезагрузки и чтобы можно было посмотреть прогресс загрузки этой страницы.
Делаю кнопку:
<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="">
Как можно повесить прогресс на всю страницу из запроса?
Ещё раз повторюсь: весь документ req.html с учётом изображений весит 9мб, а текст документа (что я как раз и получаю) весит несколько килобайт. Прогресс разумеется сразу будет 100% потому что я загружаю лишь килобайты. Как загрузить именно весь документы и получить прогресс загрузки?
Сам этот нативный ajax я брала на просторах форумов. Мне кажется, что там можно что-то изменить и тогда я буду получать именно содержимое документа с объектами в нём, а не просто текст.