Background image urls vs base64 data uri - phonegap

[bohboh]

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?

[mitchellsimoens]

It will take a bit of time for the device to render the images and that depends on how many images and the size of the images. If you have a url, then the device will have to load the image where base64 string it's already downloaded.

[bohboh]

So does that mean that there is no way to eliminate the momentary loading of images? I have them all as background image urls , i also optimised the images using imageoptim.
When i switched a few of the smaller images to base64 data uri's, i couldnt see any difference.

[mitchellsimoens]

Sounds like in your case no.

[bohboh]

OK, thanks.
One thing i havent tried is defining images from with the views, for the icons, i set iconCls and set the paths from my css.
I may investigate ways to speed up the loading of images, at the moment the phonegap app has the feel of a website in the way it loads images which isnt great. The images arent big either, quite small.

[digeridoopoo]

I'm having the same problem....it doesn't look too professional seeing a background image class load in one tab. As there are 3 lists in this tab item that grabs from a store I was thinking if having a loadmask tied to the store....or just having a loadmask set on a timer that is 1 second default for each tab.

Is there another solution?

[Sno]

How are you adding components like panels, and lists to the view port and how are you swapping to an active screen?

I currently run a function at app launch that compiles Ext.Viewport.add(Ext.create('component'));

Than I use Ext.Viewport.setActiveItem(index); to set the screen into view.

So if your Ext.create('component') is rendered as hidden:true, you may have some prevention to the issue.

This is untested.