Gif Animation

[garyblackpool]

Hi sorry if this is a bit of a simple question but i am not sure how i would go about this.how would i get a gif animaion to run at some period after the page has loaded?Thanks

[jeffman]

Are you talking about changing the speed of an animated gif, as in 89A format? There is no JavaScript interface to that kind of stuff.If you want to animate some sprites (or something simialr) you control the time with setInterval() or setTimeout().EDIT: Or is it that you don't want the animation to begin until a specific time? That would be a kind of trick, where you have a static image that loads first, and then you use setInterval() to replace the image src with the URL of the animated version. This will work best if you preload the animated version before you display it.

[dsonesuk]

in adobe 'ImageReady' you can set a time interval before an animation is started, and whether to run it just once, repeat for set amount of times, or loop continually.

[garyblackpool]

Okay to make a gif animation work after loading you have to swap the image.Preloading images does that slow down loading of the page. Could you use ajax to load images for when you need them? Sorry if off topic, but i am just wondering how pingwire.com shows pictures to your screen .Cheers

[jeffman]

Every HTTP request slows down the overall loading of a page. An advantage to images is they are loaded asynchronously, so that the TEXT portion of a document continues to load while the images are downloading. If you had to pause and wait, the web would be annoying as heck. Preloading is the same way. The download happens in the background while the rest of the page loads. So the overall download of the page will be slower.How much slower depends on how many other elements your page is downloading and how big they are, and also the size of the pix you'll be preloading.The preload technique just looks like this:

my_image = new Image();my_image.src = "images/my_pic.gif";

And you can have as many of those as you need. Since image loading happens asynchronously anyway, you don't need AJAX to load images "in the background" and not interrupt the user experience. But if you think it will improve performance, you could certainly set that technique so it doesn't execute until something else has finished loading, or until a timer goes off.For continuous loading of images, like pingwire.com, one way is to use AJAX, as you suggested. You wouldn't be sending the images themselves over AJAX, because that really could overwhelm the AJAX mechanism. Rather, AJAX polls your server at regular intervals (two seconds, half a second, whatever) and your server sends back the whole or relative URL of the next image (a very small amount of text). When Javascript receives it, it adds another image element to the DOM, and the image begins loading as soon as the src property is set.I don't feel like examining the pingwire code, but the actual technique seems a little different than what I just described. Those image blocks fill the screen at SUCH regular images, I suspect the code is adding image "blanks" into the DOM when a timer goes off, and then assigning some of the blanks a URL as the URLs themselves return to the AJAX requests. That would explain why some of the blanks stay blank, and then you get a group of images, and then another group of blanks. (I'm on DSL right now; on my T3 at work they might all fill -- I don't know.)I'm not sure what any of this has to do with animated gifs, though. Certainly the pingwire.com DOM is animated, but that's a different thing.Since pingwire.com obviously has some server action going on, it is possible, even likely, that the server itself is manipulating the images in some way. PHP, for example, has some module code that lets you play around with images using a limited set of editing methods. One thing you can do with this is resize images, cropping where necessary, without losing a lot of quality. But that's also a different thing.