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
There are a few ways to do that. Off the top of my head and in order I'd try them:
Use phonegap's File API to download the image, and display it only once you've got it.
Use an XHR to download the image, and once you get the whole thing send it to the image via a data: URI.
Set your "loading.gif" image to a lower z-order than the foreign image, with the same left/top/height/width.
Use 'loading.gif' as a background.
Related
This gif normally loops infinitely, but when I uploaded this gif to my wordpress site (or anywhere online) it only loops once.
<img loop=infinite class="wp-image-161 size-full" src="http://i2.wp.com/yobd.digital/wp-content/uploads/2016/04/merge-lines.gif" alt="Merging Lines with a macro!">
You need to add application extension to force looping:
0x21,0xFF,0x0B,"NETSCAPE","2.0",0x03,0x01,0x00,0x00,0x00
Place it anywhere after GIF header and before first image header
for more info see Animated gif only loops once in Chrome and Firefox
After I done it to your GIF it loops:
You have to add "LOOP=INFINITE"
I wonder if there is a way to prevent a browser from actually animating an animated gif, loaded in a <img> tag.
I just want it to display the first frame of the gif and don't play the animation.
I already fear that this isn't possible and I have to extract the first frame and render it to a canvas.
This is kinda an expensive solution, but if you reset image SRC on a very short setInterval it appears as static e.g:
setInterval(function() {
document.getElementById('img1').src = document.getElementById('img1').src
},1)
Demo: http://jsfiddle.net/MEaWP/6/
Maybe this is too simple an answer for you but you could just open the animated GIF in a image editing program of your choice, i.e. Adobe Photoshop or any other free one, and then just save out the GIF without the animation.
Then re-upload the new GIF (without the animation) to wherever you are serving your images from.
If you do use Photoshop you can simply open the file.GIF and go to Window>Animation in the Menu. This will display all the frames in the animated GIF in a new dialog box.
Just delete all the frames and Save As. Just don't overwrite the original with the animation if you will still need that later.
What I'm doing
Hello Im having problems loading external images into my flash (builder) application.
To show the image I use a BitmapImage with smoothing enabled like this:
<s:BitmapImage id="image" smooth="true" smoothingQuality="high" width="100%" height="100%" fillMode="clip" />
I also show thumbnails using the new flex4.6 scaleMode ZOOM like this:
<s:Image id="thumbnail" scaleMode="zoom" smooth="true" smoothingQuality="default" />
I preload the external image using a SWFLoader because I need to store the original image width and height
The problem
When I test my application locally everything works fine! But when I run it from my web domain I see its showing problems. For images running on the same domain and images from Flickr = no problem. But other images like from imageshack show the following problems:
The larger BitmapImage is not smooth.
The thumbnail is not scaled like its supposed to. It's showing minuscule in the upper left corner of the thumnail Image. When I hover my mouse over it, the thumnail is shown but like it would be shown with the default scalemode and fillmode CLIP
Cause?
Im not really sure whats causing the problem, but the only difference I see in the image sources is in the domain policy. The crossdomain.xml for Flickr allows all http://farm1.static.flickr.com/crossdomain.xml unlike imageshack.us http://www.imageshack.us/crossdomain.xml
If this would be the cause then I dont understand why the image is still being loaded but crappy. Does anybody know what's going on exactly? Any solutions? Thnx.
There are certain limitation to loading images cross domain without the correct policy enabled. Flash will load the data, but not allow any manipulation, including smoothing.
There are a number of ways around this. You could use a server-side proxy, loading the image via a local php or asp page. It's not the fastest solution, but it will work.
You could also try loading the image with LoadBytes, then passing the byte-array into a Loader object. It's not as pretty as using the Flex component, but it should restore some control to you.
I'm attempting to load HTML from the Shopify blog API into a TextField in Flash. The problem is that Shopify doesn't add width and height attributes to images that are in the blog posts. When I load these into Flash, the width and height of the image is ignored and the height of the TextField is incorrectl, which screws up my scrollbar among other things.
Is there any way to read the width and height of the images as they are loaded? I could possibly do this with PHP before it gets to Flash, but I'm not sure how.
Not sure about your original question about getting the image info in flash, but in PHP it wouldn't be much trouble, although it would slow down the process down somewhat.
Step 1: Setup a PHP proxy, which you call from your flash.
Step 2: In your PHP proxy, after grabbing the HTML, loop through all the img-tags. (You can do this easily, with e.g. PHP Simple HTML DOM)
Step 3: While looping, if the image dimensions are missing from the img-tag, download the image, check the image size and update the tag. (Also easy using PHP Simple HTML DOM)
Step 4: Echo the updated HTML to your flash movie.
If you use the BitmapData class you can get access to the width and height of images, along with other useful properties and methods.
if you load the image data (URLLoader in FlashPlayer or FileStream in AIR)
(FileStream would lets you do it synchronously)
with some effort you can parse the width and height of the image from the file HEADER synchronously.
if you want to display the image from the image data, throw it at loader.loadBytes for Adobe to decode it for you. sounds like you want it to show up in the htmlText though.
if you can manage to take a synchronous path to get all this data, your textfield can take into account the image height before the next frame so it won't look jittery.
Is there any way, in HTML, to include an animated GIF in an <img> tag, but automatically tell the GIF to not animate? I realize that the user can stop animation by pressing ESC or clicking Stop, but I want the GIFs not to animate at all.
I only want to do this on one specific page, and making separate non-animated versions of the (1500+) GIFs is not feasible. I simply want the GIFs to not animate.
You could use Giffer.
Just include the library in your page:
<script type="text/javascript" src="gifffer.min.js"></script>
Instead of setting src attribute on your image use data-gifffer.
<img data-gifffer="image.gif" />
At the end, call Gifffer() whenever you want. For example:
window.onload = function() {
Gifffer();
}
If you don't want the GIF to move at all you can always edit the .js file to remove the play button.
Not with plain HTML but using PHP with imagecreatefromgif might help you
I don't think calling window.stop() will be a good solution. This would need to be called for every image that is loaded to prevent it from running half way through and stopping. The best solution is to use a library such as GD to create images featuring just the first frame of the animated GIF.
Use ImageMagik, and you can readily convert all 1500 images.
You could use window.stop() in javascript, which should be the equivalent of pressing ESC/clicking stop. However, I'm pretty sure it won't work in all browsers (i.e. IE).