Ответ 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 = ...
Затем запрос изображения выполняется только один раз, когда элемент создается.