Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

A way to optimize image loading

Hi all,

We are currently doing an iphone app for a jewelry from paris.

i have many scroll views (createScrollableView), all of these scroll views shows PNG pictures at almost fullscreen size.

So, sometimes the pictures takes a few seconds to load (not every time, and not every same picture)

Is there a way to preload pictures / scrollViews or a way to optimize ?

Many thanks

— asked March 30th 2010 by Yann Marzack
  • optimization
  • pictures
  • preload
0 Comments

7 Answers

  • Accepted Answer

    You can't preload webviews, so each webview is only rendered at the time it needs to be displayed.

    Can you use native image views instead?

    — answered March 30th 2010 by James K
    permalink
    0 Comments
  • try to use a scrollableview instead of a scrollview to load the pictures. The scrollable view will preload propperly. (i've also resently switched to a scrollable view instead of a scrollview.

    The only disadvantage a scrollableview has upon a scrollview is that you can only see 1 view/image on your screen at a time.

    — answered March 30th 2010 by Glenn Tillemans
    permalink
    0 Comments
  • Thanks, but i already use a scrollable view :
    var scrollView = Titanium.UI.createScrollableView

    So do i have to set a property ?

    — answered March 30th 2010 by Yann Marzack
    permalink
    0 Comments
  • I'm curious. I"m developing a similar type, images in scrollableView, app. Pngs often have a larger file size than say, jpgs. Do you guys know if the files (in kb), affects memory usage (loadtime), or is it just looking at the files dimensions an there is no diff?

    B.

    — answered March 30th 2010 by Brendan Gallagher
    permalink
    0 Comments
  • Thats odd then, im using 30+ images in my scrollableview and it just loads fine for me.

    maybe you should optimize the images itself to 320x480 @ 72dpi (thats what i did)

    — answered March 30th 2010 by Glenn Tillemans
    permalink
    0 Comments
  • Strange, my pictures are already optimized at 320x480 @ 72 dpi too…

    Maybe my code is wrong, as i create all the scrollableview content in the onload event ? :

    window.onload = function()

    {

    var cm1 = Titanium.UI.createWebView({url:'child1.html'});

    var cm2 = Titanium.UI.createWebView({url:'child2.html'});

    var cm3 = Titanium.UI.createWebView({url:'child3.html'});

    var cm4 = Titanium.UI.createWebView({url:'child4.html'});

    var scrollView = Titanium.UI.createScrollableView({

        views:[cm1,cm2,cm3,cm4],
    
        showPagingControl:false,
    
        pagingControlHeight:30
    

    });

    Titanium.UI.currentWindow.addView(scrollView);
    Titanium.UI.currentWindow.showView(scrollView);

    };

    — answered March 30th 2010 by Yann Marzack
    permalink
    0 Comments
  • Hi Yann,

    Are your images local or remote? If remote then you might consider downloading them and saving to the filesystem or database on a previous screen.

    If they are local and you have an initial screen, maybe you could create the view objects there first, and pass them across to the window containing the scrollviews by attaching them to the window. That way you're only using-up time whilst the user is deciding where to go.

    cheers,
    Chris.

    — answered March 30th 2010 by Chris Reed
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.