Background Image loading late in IONIC App

I have an app the page has a background image, but when the the page is loaded there is a white background and then the image is loaded. The image is stored inside the app itself, I want to get away with the loading time.

Kindly help.

How do you include the background image?
How big is the background image?
How and where are you testing?

  1. CSS background-image :url () to ion-content
  2. File size : 45kb, dimension: 1920 × 1080
  3. Testing on Samsung galaxy s7 edge, android device

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Then look at the network tab to see when it starts “loading” the image. Using the “Performance” tab you can probably also profile when the loading is finished.

and if it is loaded later when the project loads, how should i load it beforehand?

That depends on what you investigation turns up. If it isn’t the actual loading of the image but the processing to display (these are a lot of pixels after all!) the solution might be totally different.

It loads late, the image is picked when the other page is called

Issue solved loading image prior to loading the page did the job

How did you achieve that? Future readers might need that as well…

in my index.html file
<img src="…" style=“display:none”>