Как сделать прелоадер, работающий, пока все картинки и видео на сайте грузятся?

Question

[Кирилл]

С картинками без видео я могу сделать, а вместе с видео не получается.
Информации по поводу видео найти не смог, у меня еще не было опыта создания подобного.

Answer 1

[alexhovansky]

В самом примитивном варианте, без promise, async/await и т.д.:
1) делаете 2 функции: videosIsLoaded, imagesIsLoaded
2) в каждой функции отслеживаете загрузку всех соответствующих элементов
3) с картинками, Вы сказали, что разобрались
4) в функции videosIsLoaded, video.addEventListener('canplaythrough', cb), а еще лучше загрузите его аяксом и используйте onload
5) в videosIsLoaded и в imagesIsLoaded вызываете одну и ту же функцию, которая проверяет 2 условия - загрузка картинок и видео, можно просто завести 2 переменные (1ую для картинок и 2ую для видео) и менять их с false на true при загрузке контента.
6) в вызываемом callback (пункт выше) просто проверяете обе вышеуказанные переменные и прячете прелоадер.

Comments

[Кирилл]

А как можно осуществить загрузку видео через аякс?

[alexhovansky]

var req = new XMLHttpRequest();
req.open('GET', 'video.mp4', true);
req.responseType = 'blob';

req.onload = function() {
if (this.status === 200) {
var videoBlob = this.response;
video.src = URL.createObjectURL(videoBlob);
}
}
req.onerror = function() {
// Error
}

req.send();