Контроль порядка загрузки изображений в HTML

Есть ли способ контролировать порядок загрузки изображений на веб-странице? Я подумывал о попытке имитировать предварительный загрузчик, сначала загрузив легковесную графику "LOADING". Любые идеи?

Спасибо

Ответы

Ответ 1

Используйте javascript и оставьте свое изображение src пустым.

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

HTML:

<img src='' id='img0' alt='[]' />
<img src='' id='img1' alt='[]' />
<img src='' id='img2' alt='[]' />

JS:

var imgAddresses = ['img1.png','img2.jpg','img3.gif'];

function loadImage(counter) {
  // Break out if no more images
  if (counter==imgAddresses.length) { return; }

  // Grab an image obj
  var I = document.getElementById("img"+counter);

  // Monitor load or error events, moving on to next image in either case
  I.onload = I.onerror = function() { loadImage(counter+1); }

  //Change source (then wait for event)
  I.src = imgAddresses[counter];
}

loadImage(0);

Вы даже можете играть с помощью document.getElementsByTagName("IMG").

Кстати, если вам нужно загрузочное изображение, это хорошее место для начала.

ИЗМЕНИТЬ

Чтобы избежать множественных запросов на сервер, вы можете использовать почти тот же метод, только не вставляйте элементы изображения, пока не будете готовы их загрузить. Имейте контейнер <span>, ожидающий каждого изображения. Затем проведите цикл, получите объект span и динамически вставьте тег изображения:

var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...

Затем запрос изображения выполняется только один раз, когда элемент создается.

Ответ 2

Просто добавьте изображение "загрузки" перед любыми другими изображениями. обычно они включаются в самую верхнюю часть страницы, а затем, когда загрузка страницы завершается, они скрыты JS.

Ответ 3

Я думаю, что эта статья https://varvy.com/pagespeed/defer-images.html дает очень хорошее и простое решение. Обратите внимание на часть, которая объясняет, как создать "пустой" <img> теги с:

< img src= " данные: image/png; base64, R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs =" data-src= "your-image-here" >

чтобы избежать < img src="" >

Чтобы отобразить загружаемое изображение, просто поместите его в HTML и измените его позже в соответствующий момент/событие.