0

In my HTML5 mobile app, I am retrieving 10 images at a time from imgur (the user clicks a button to get more images). When the images are retrieved, I apply some formatting via CSS (mostly to the height and width so that it properly fits the dimensions of an iPhone).

My guess is that one of the reasons why it’s taking so long is because I’m applying formatting to the images once they’re retrieved and then showing these images. Would I be better off saving the images in the state they should be displayed with the right dimensions so I don’t have to apply any CSS to them? Would this help in getting the images to load faster?

Thanks!

sharataka
  • 5,014
  • 20
  • 65
  • 125

2 Answers2

1

According to this post, you should probably be grabbing only six at a time.

Also, open your browser's debugger, go to the NETOWRK tab and watch how long things are actually taking.

Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • As far as I know, mobile browser has a limit lower than 6 (I think 2, if not wifi connected) – Christian Kuetbach Aug 23 '13 at 20:22
  • So the steps I should take are: change format/compression of original images to fit display size and to make it smaller. Only call ~6 images at a time. Hopefully those steps will make the images in my phonegap iPhone app load faster! – sharataka Aug 23 '13 at 20:57
0

Are the images that you are loading actually bigger than the display size? If so, it will load slower not because of the CSS application, but because you are loading unnecessarily big images. You should always re-size the images that you use to the displaying size. You can also change the format and/or compression of the images to make it smaller, thus loading faster.

cecilomar
  • 13
  • 5