CODEWITHSUNDEEP
htmlimagecordovaloadinggif
jhdj
jhdj

Reputation: 631

phonegap put gif on image loading till it is loaded

I have a phonegap application that loads external images.

sample img code:

<img src="http://example.com/hello.jpg">

Will use this code to put the gif with some css

<img src="loading.gif">

I want to show a loading gif on top of the image till the image has been loaded and hide the loading gif afterwards.

Want to know how to detect if image is ready and hide the gif.

Thanks

Upvotes: 0

Views: 1491

Answers (1)

DougM
DougM

Reputation: 2888

There are a few ways to do that. Off the top of my head and in order I'd try them:

  1. Use phonegap's File API to download the image, and display it only once you've got it.

  2. Use an XHR to download the image, and once you get the whole thing send it to the image via a data: URI.

  3. Set your "loading.gif" image to a lower z-order than the foreign image, with the same left/top/height/width.

  4. Use 'loading.gif' as a background.

Upvotes: 1

Related Questions