CODEWITHSUNDEEP
javascriptcsshtmljquery-mobilemobile
sharataka
sharataka

Reputation: 5132

How to get images to load faster in HTML5 mobile app?

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!

Upvotes: 0

Views: 673

Answers (2)

cecilomar
cecilomar

Reputation: 13

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.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

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.

Upvotes: 1

Related Questions