У меня есть сайт, и на нем есть слайдер картинок. При загрузки страницы фотографии загружаются одновременно(к примеру смотришь первый слайд, а он ещё прогружается и так все изображения). Как сделать так чтобы они загружались поочередно?
-
Мне кажется, самым простым способом решения подобной, а в дальнейшем, будущих проблем - это создать при помощи Javascript заглушку с индикацией загрузки страницы. Пока страничка не прогрузиться, не показывать её пользователю вообще. Это самый простой способ. Если заморочиться, то необходимо искать причину такого поведения. Медленный доступ к серверу и т.п. Также можно сделать асинхронную загрузку изображений.– Алексей16 мар 2019 в 14:23
Добавить комментарий
|
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"/>