1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    22
    Vote Rating
    2
    bohboh is on a distinguished road

      1  

    Default Unanswered: Background image urls vs base64 data uri - phonegap

    Unanswered: Background image urls vs base64 data uri - phonegap


    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Answers
    3467
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    22
    Vote Rating
    2
    bohboh is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Answers
    3467
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Sounds like in your case no.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    22
    Vote Rating
    2
    bohboh is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Same problem...

    Same problem...


    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?

  7. #7
    Sencha User
    Join Date
    Apr 2010
    Posts
    29
    Answers
    2
    Vote Rating
    1
    Sno is on a distinguished road

      0  

    Default


    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.