How to make images did not loading in the same time?

Question

How to do this:
1st image: complete
2nd image: complete
3rd image: complete

Not like this:
1st, 2nd, 3rd Image: Complete

Answer 1

Try it

const loadImages = function(sources, callback){
let nb = 0;
let loaded = 0;
let imgs = {};
for(let i in sources){
nb++;
imgs[i] = new Image();
imgs[i].src = sources[i];
imgs[i].onload = function(){
loaded++;
console.log(`${loaded} complete`);
if(loaded == nb){
callback(imgs);

}
}
} }

Answer 2

Taste i think jingga is asking about image preloader

lương tuấn good code👍 I am adding just in case jingga doesn't understand what sources and callback should be

Jingga Sona 🐺
If i interpret your question correctly, you are going to make an image preloader, and the result will be something like this:
...

I am sharing Taste's preloader demo for you (he coded for me back when I asked in Q&A) :
Image Preloader example by Taste:
https://code.sololearn.com/WCZaHjViG0Ve/?ref=app

Below for enrichment only:

If you want to eat "fast food", just use Taste's template.
If you want to truly master it, check my scripts and see how I have varied the logic.
To implement callback, it is not a must to have a function which takes another function as parameter, it is more about calling another function when something has ended.
This one is a callback too:
https://code.sololearn.com/WBJB498Ga91S/?ref=app

Edit: I have taken my code away, because Calvin's demo for you is easy and clear.

Answer 3

Hide them all. Then show them one by one. Thats the only thing i can think of

Answer 4

Try to study this

https://code.sololearn.com/Wrs20U62hU2s/?ref=app

It loads images sequentially, suitable for loading image gallery with large numbers of images
https://code.sololearn.com/WA55b8eiXb3T/?ref=app

Answer 5

lúóng tuâń please go to my profile I need your help