Очередность загрузки файлов на html-странице

Question

Меня интересует как можно управлять очередностью загрузки файлов на html-странице.
Например, у меня на странице есть 5 картинок и 5 видео-файлов. Каким образом мне сначала загрузить картинки, а потом начать загрузку видео-файлов?

Answer 1

У жизненного цикла HTML-страницы есть три важных события:

DOMContentLoaded – браузер полностью загрузил HTML, было построено DOM-дерево, но внешние ресурсы, такие как картинки и стили, могут быть ещё не загружены.

load – браузер загрузил HTML и внешние (картинки, стили и т.д.).

beforeunload/unload – пользователь покидает страницу.

Источник

Таким образом, можно не указывать src для html-элемента video сразу, а использовать событие window.onload и задавать src динамически после загрузки страницы.

window.onload = function() {
  // искуственная пауза, т.к. изображения слишком быстро загружаются
  setTimeout(function() {
    var videoPlayer = document.getElementById('video-player');
    videoPlayer.setAttribute('src', 'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4')
  }, 4000)

}

.cats__content {
  display: block;
}

.img__cat {
  width: 200px;
}

.video__player {
  width: 320px;
  height: 240px;
}

<div class="cats__content">
  <img id="img1" src="https://placekitten.com/g/300/300" alt="Cat #1" class="img__cat" />
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum cursus interdum. Nulla orci lorem, efficitur in erat et, aliquam mollis lorem. Vestibulum ut felis quis lorem vestibulum consectetur. Nullam fringilla turpis non ante egestas, auctor
    mattis orci dignissim. Ut sed mollis ex. Pellentesque dolor odio, condimentum congue sapien at.
  </div>
  <img id="img2" src="https://placekitten.com/500/500" alt="Cat #2" class="img__cat" />
</div>

<!-- Видео не загружается сразу, а только после того как параметр data-src будет заменён на src -->
<video id="video-player" class="video__player" controls data-src="" type="video/mp4">
</video>

Используя jQuery, можно вызвать $(window).on('load', function(){...}). Например, так.

БЛОГ НА HUSL

Очередность загрузки файлов на html-странице

Ответы (1 шт):