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

Question

Есть ли способ контролировать порядок загрузки изображений на веб-странице? Я думал о том, чтобы попытаться смоделировать предварительный загрузчик, сначала загрузив облегченную графику «ЗАГРУЗКА». Есть идеи?

Спасибо

Answer 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").

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

EDIT

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

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

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

Answer 2

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

Answer 3

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

data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

чтобы избежать

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

Answer 4

Вот небольшой плагин jQuery, который сделает это за вас: https://github.com/AlexandreKilian/imageorder