Sencha touch 2 - background image urls vs base64 encoding

Question

I have built a phonegap app in sencha touch 2. it all works ok, but I notice a momentary hang when switching tabs when it loads images/icons.

I would have thought it would have been instant since the images are all contained within the app.

I load the images as css background images.

As a test, i took one of the images and turned it into a base64 encoded string and placed that within the css. No difference.

Is this how it is with phonegap apps? or is there a way to make images load instantly? preloading?

Answer 1

You can do this using native javascript, see my code example below

var me = this; 
me.image = new Image();
me.image.src = 'test.jpg';
me.image.onload = function() {
    console.log("Image Loaded");
}

You could apply this to multiple images by creating an array of image sources and looping through them to utilize the above code.