Question:
I have a website and it has an image slider. When the page is loaded, the photos are loaded at the same time (for example, you watch the first slide, and it is still loading, and so on all the images). How can I make them load one by one?
Answer:
Like this:
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"/>