+ 8
How to make images did not loading in the same time?
How to do this: 1st image: complete 2nd image: complete 3rd image: complete Not like this: 1st, 2nd, 3rd Image: Complete
5 odpowiedzi
+ 18
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);
}
}
} }
+ 4
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.
+ 2
Hide them all. Then show them one by one. Thats the only thing i can think of
+ 2
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
0
lúóng tuâń please go to my profile I need your help