webos background image updating problem

Question

My application has a preference screen which has a feature for changing the background color or theme. For that, I am using png images with different colors. When I go to the main screen, I am using some other image depending on the image selected in the preferences. To do that, I am changing the background image with CSS in the deactivate() method of the preference screen. In the emulator, it works fine. When I install the app on the device and check the same case, it shows blank, then it changed the main screen image.

How can I avoid the moment of blank background in the transition from preference screen to main screen?

Answer 1

It sounds like the image is taking a second to load. You can sprite the images together so they are always held in memory, or you can create a new image in JS and only run the scene transition when the image is loaded.

var img = new Image();
img.onload = function() { /* Run scene transition */ };
img.src = "path/to/the/background";