Scrolling of content with images

[jogo]

Hi All,

I'm finishing my next app with GWT Mobile. But I ran into one problem, that the customer is really concern about - scrolling of content. The app is quite simple, it contains few pages. Some of them only text and some of them text + images.

When I tested the app on HTC Desire (Android 2.3.5)  and Google Nexus 7 (Android 4.1.2) tablet - there is a noticable delay, when a page containing images is created, attached to the DOM and the transition is made. Pages that contain just plain text are fine. Also when I scroll down, the scrolling hangs when each image show ups in the visible area.

But if I go to the same page next time, it loads quickly, the transition is smooth as well as the scrolling experience is much better.

This leads me to thinking, that the problem lies in loading the images (resources) into browser's memory / cache. And as the browser needs to do some I/O operations, it really slows down the loading of a page. Basically he loads images as soon as the page is attached to DOM and img tags are created, therefore there is the delay what is caused by I/O operations.

Native Android / iOS apps probably loads all resources into memory at startup, so the user experience is as best as possible.

So I am going to try this as well - pre-load / pre-cache all the images used in the app at startup. This should make the user experience much better.

I already use this technique for buttons that change when a user clicks on them - they are preloaded at startup.

I'll keep you updated about the result.

[Zhihua (Dennis) Jiang]

jogo, if there are not too many pictures, pre-loading them upfront should be the way to go to improve the app's smoothness.

--
You received this message because you are subscribed to the Google Groups "GWT Mobile" group.
To unsubscribe from this group and stop receiving emails from it, send an email to gwtmobile+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[jogo]

yes, it helped to improve the first load of a page and overall user experience (scrolling including).

basically I added new SplashPage with timer where images are loaded. firstly simple through UIBinder and HTML and CSS class with display:none.

now I use this method to preload images as suggested on StackOverflow:

//http://stackoverflow.com/questions/2169044/will-an-image-with-style-display-none-still-be-downloaded-and-cached

private static final native void preloadImages(String[] images) /*-{

for (var i = 0; i < images.length; i++) {

var img = new Image();

                        img.src = images[i];

}

}-*/;