I am facing an issue with loading images onto my ionic page. In detail, my page has many images to be loaded and they are of different sizes. Because loading takes a while, some images appear before the others and this creates a very bad user experience.
For example the page should be like this:
Then in reality image3 loads first and for a while it becomes:
Then Image 1 loads:
Then finally image 2 loads
So I think there are 3 solutions but I don’t know how to do it in ionic:
- A full screen loading screen until everything loads finish
- A dedicated pre-loading screen for each image to load so their sequence do not get mixed up
- A skeleton screen like facebook’s that also waits till everything finish loading before disappearing.
However does anyone knows how to create a loading screen and only transition after all content are loaded? Not only the html loads but the images loads too.
Thank you hope this is clear.