HTML-видео начинает загружаться после завершения загрузки нескольких других изображений на странице

Question

Иногда HTML-видео в верхней части моего сайта не запускается, когда пользователь посещает сайт в первый раз.Это связано с тем, что фильм загружался задолго до того, как были загружены другие файлы изображений на странице.До этого момента запрос на ресурс не отправлялся, как я вижу через сетевое расширение firebug.

Поскольку видео находится поверх других изображений, я хочу, чтобы оно было загружено сначала и быстрее.В моем HTML-коде видео также размещается перед другими изображениями, так почему загрузка фильма заблокирована на такое долгое время?

Как это исправить, чтобы ускорить загрузку фильма?

Размер фильма (версии .mp4) составляет около 600 КБ в течение 30 секунд.

Answer 1

Я вижу два возможных решения вашей проблемы:

a) Используйте CSS background-image на inline-block DIV вместо <img> элементов. Фоновая загрузка выполняется в потоках с более низким приоритетом почти во всех браузерах. Таким образом, загрузка вашего видео, скорее всего, получит больший приоритет.

b) В своих тегах <img> не указывайте атрибут src. Вместо этого укажите источник изображения в другом атрибуте, скажем isrc. В обратном вызове domReady скопируйте атрибут isrc в src для всех изображений. то есть что-то вроде:

$(document).ready(function() {
  $('img').each(function() {
    if($(this).attr('isrc')) {
      $(this).attr('src', $(this).attr('isrc'));
    }
  });
});