Before beginning of game, how to load images?

Question

I am developing a game with a lot of images (Photo I took myself), they have large size. I don't want bad player experience because they have to wait for the pictures to load when playing.
Having said my situation, my question should actually be three questions:
1. How to load all pictures before game start?
2. How do I know when all pictures are loaded?
3. The loading progress bar, can this be really showing the real loading progress?

Answer 1

Its a concept but maybe you can work on it
Create an array of link of your images
And a variable called progress
Then cache the image using new Image() also add an onload listener, it'll add value to progress indicating 1 imange are loaded

Once progess == arrayoflink.length then all the image are loaded

and you should be able to work on progress bar with progress variable

edit: i tempted to make one 😄
https://code.sololearn.com/WCZaHjViG0Ve/?ref=app

Answer 2

Similar concept https://code.sololearn.com/WEEl1g03B3Vx/

EDIT: ╰☆☆ S͎p͎e͎a͎r͎y͎ ☆☆╮ I just realized that you want a progress callback. If you understood my code, its easy add this feature else i can add it

Answer 3

Thanks Taste and KrOW , both way works for preloading images. Thanks
Because Taste's also solve my question 3 about reflecting the progress, I'll award the Best Answer to Taste.
Meanwhile, I thank you again to both of you. If you don't mind, I let you look at my drafts😆