Как сделать поочередную загрузку изображений

164
10 декабря 2019, 05:30

У меня есть сайт, и на нем есть слайдер картинок. При загрузки страницы фотографии загружаются одновременно(к примеру смотришь первый слайд, а он ещё прогружается и так все изображения). Как сделать так чтобы они загружались поочередно?

Answer 1

Вот примерно так:

load([...document.querySelectorAll('img')]); 
 
function load(imgs) { 
  let img = imgs.shift(); 
  imgs.length && (img.onload = img.onerror = load.bind(0, imgs)); 
  img.src = img.dataset.src; 
}
<img data-src="https://i.imgur.com/cdqfoqZ.png"/> 
<img data-src="https://i.imgur.com/tbmyMTo.jpg"/> 
<img data-src="https://i.stack.imgur.com/l1Mpe.jpg"/>

READ ALSO
Как прописать в javascript путь к ресурсам
javascript

Как прописать в javascript путь к ресурсам

Работаю с картой leafletjs и в коде javascript использую ссылки на 2 иконкиИ если файлы иконок лежат вместе с тестовым html файлом все работает, но когда...

 150
Как создать кастомную строку поиска
javascript

Как создать кастомную строку поиска

Всем приветХочу создать кастомную строку поиска на карте, как, например, на maps

 183
Изменения внешнего вида slick slider
javascript

Изменения внешнего вида slick slider

нужно сделать вот такую внешний вид у slick slider надо сделать так чтобы видна была кусок предыдущего слайда и кусок следующего (что бы было понятно...

 191
Не работает ограничение на тип вводимых данных JS
javascript

Не работает ограничение на тип вводимых данных JS

Не понимаю, почему любое вводимое значение в поле в консоли отображается как строка (будь то символ или число)В чем некорректность кода?

 170