1

I'm developing an app with JQuery Mobile and Phonegap Build. And there's a list including images. This list is populated dynamiccaly. But I am not using JQM markup on this list, because it would be even slower.

It's a list with 264 items for now, and increasing. And the images have to be at least 250px height for tablet devices.

For now all these images are shipped with app. Should I resolve to load the image from a server ? If yes, will it be even slower to scroll the list ?

Thanks

Louis
  • 2,548
  • 10
  • 63
  • 120

3 Answers3

2

It would be better to ship the images with the app as the images would not have to be requested from a server and therefore load faster. Loading the items from the server would give you a bit more freedom, as you wont have to redeploy your app to add items.

For better performance your best solution would be to load images on demand. In other words only load x amount of images at a time, once the user scrolls down to the last image load the next set of images.

So the best practice in your scenario would be to load images on demand (lazy load) the images as the user scrolls.

You can use something like http://www.jscroll.com or http://dcarrith.github.io/jquery.mobile.lazyloader/ to achieve this.

Hope that helps

Jako Basson
  • 1,461
  • 12
  • 19
  • If you down vote an answer, please state why you're down voting the answer as its not clear to me why this answer does not help with your question – Jako Basson Mar 02 '15 at 16:55
  • Yep, up voted yours just to get everything back to 0 :) – Jako Basson Mar 02 '15 at 17:26
  • I chose an hybrid solution, where I ship the images with the app, but I can add images to the server and the app will detect it and load them from the server. So I don't have to redeploy every time I have to add a new image. – Louis Mar 03 '15 at 08:36
2

Using something like Universal Image Loader in conjunction with a dynamically loading list like this should be what you're looking for.

Whether to load from local data or from a server, I'd suggest storing the images in an outside database as there's far fewer limitations in what you can do with it.

Community
  • 1
  • 1
Kony2013
  • 171
  • 9
  • So someone just down voted everything. I'd appreciate feedback as to why you did, I'd like to improve my answers. – Kony2013 Mar 02 '15 at 17:08
  • Hi thanks for your answer, but I am using HTML (hybrid app) as implied by JQM and Phonegap. – Louis Mar 02 '15 at 19:35
2

For smooth scrolling, you can try http://airbnb.github.io/infinity/, which is irrespective of number of images or list items.

It allows limited number of elements in DOM, so that page performance does not degrade. Check this fiddle , http://jsfiddle.net/Luq16one/4/.

var $el = $('#my-infinite-container');
var listView = new infinity.ListView($el);

// ... When adding new content:

var $newContent = $('<p>Hello World</p>');
listView.append($newContent);

// ... To remove items from a list:

var listItems = listView.find('.my-items');
for(var index = 0, length = listItems.length; index < length; index++) {      
    listItems[index].remove();
}
Sheba
  • 726
  • 7
  • 16
  • Great plugin ! thanks ! With infinity.js, my list scrolls much faster. – Louis Mar 03 '15 at 08:34
  • Hi @Sareskaph, can you help me on this one :http://stackoverflow.com/questions/28828881/best-practices-with-infinity-js I think I need an example on how to 'refresh' the list with filtering checkboxes. – Louis Mar 03 '15 at 13:19