0

I'm currently creating an iOS app with Cordova which uses CSS3 animation transitions to fake slide in/out and pop in/out page navigation.

The issue I am currently experiencing is that after the animation completes the images flashes for a fraction of ms (only on mobiles, not visible on desktop). All images are stored locally. By monitoring the timeline I've found that the biggest performance burden is given by the image decoding time. An image of 1020px takes around 24ms to load. If I reduce the image size to 320px the decoding time goes down to 0.9ms. How can I dynamically resize the images to the target view port before the DOM is loaded? I've looked at this answer but I've found it a bit complex for my limited javascript knowledge.

Any tip would be really appreciated.

Daniela

Community
  • 1
  • 1
Daniela
  • 861
  • 5
  • 11
  • 28
  • Hi Daniela, for javascript to process the image, it still has to be loaded. What you need is preprocessed images, images which are scaled down to 320px. – MIdhun Krishna Jun 23 '14 at 11:15
  • Thanks Midhun. Can you recommend any good source I could look at? Thanks – Daniela Jun 23 '14 at 15:08
  • One solution is to have multiple resolution of images, say image320.png image640.png and using these images depending upon the resolution using [media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). – MIdhun Krishna Jun 24 '14 at 04:56
  • One solution is to have multiple resolution of images, say image320.png image640.png, and using that for different view port sizes, or have a baseline resolution and using [css transformation](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) scale to fit it to viewport. – MIdhun Krishna Jun 24 '14 at 05:03

0 Answers0