How to load content such as images nicely onto ionic pages?

Ionic Framework ionic-v3
1

Hi everyone,

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:

  1. A full screen loading screen until everything loads finish
  2. A dedicated pre-loading screen for each image to load so their sequence do not get mixed up
  3. 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.