Есть ли способ контролировать порядок загрузки изображений на веб-странице? Я подумывал о попытке имитировать предварительный загрузчик, сначала загрузив легковесную графику "LOADING". Любые идеи?
Спасибо
Есть ли способ контролировать порядок загрузки изображений на веб-странице? Я подумывал о попытке имитировать предварительный загрузчик, сначала загрузив легковесную графику "LOADING". Любые идеи?
Спасибо
Используйте 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 = ...
Затем запрос изображения выполняется только один раз, когда элемент создается.
Просто добавьте изображение "загрузки" перед любыми другими изображениями. обычно они включаются в самую верхнюю часть страницы, а затем, когда загрузка страницы завершается, они скрыты JS.
Я думаю, что эта статья https://varvy.com/pagespeed/defer-images.html дает очень хорошее и простое решение. Обратите внимание на часть, которая объясняет, как создать "пустой" <img> теги с:
< img src= " данные: image/png; base64, R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs =" data-src= "your-image-here" >
чтобы избежать < img src="" >
Чтобы отобразить загружаемое изображение, просто поместите его в HTML и измените его позже в соответствующий момент/событие.
Вот небольшой плагин jQuery, который делает это для вас: https://github.com/AlexandreKilian/imageorder