I have a Wordpress site dealing with physics and have a page with three GIFs showing a projectile thrown at different initial speeds.
The three GIFs have identical running times and number of frames but they start playing at the same order they load so there’s a slight delay between them and it ruins the point I am trying to make.
Is there any way to have them start playing after all three have finished loading?
I guess you could have a script on the page that triggers a page refresh after all three animations have finished loading (*). Since the GIFs will be in cache at that point, they will probably be synchronised once the page is refreshed.
Thinking off the top of my head here…
Hide the graphics using the css display: none; OR show placeholder stills.
Use Javascript to pre-load the animated graphics
Once the pre-loading is done, change the display to block OR switch the placeholder stills to your animations.
Use a single GIF containing all three. This way it can’t go wrong.
This.
All other suggestions are going to rely on how the browser decides to do things. And browser behavior is not something you can control. You might get it to work in your version of your browser on your machine with your OS. But that’s not going to look the same for other people. (I have used 4 different browsers in 3 different OSes in the last 24 hours.)
In terms of loading time, bytes sent, etc., it is going to be the same (if not a little bit better).
There are a few hacks (people have these covered in the thread already it looks like), but there’s no way to guarantee a result. Even if you do manage to get them started at the same millisecond, there’s nothing to guarantee they’ll stay in-sync more than a few frames. (Especially on lower-performance computers.) The timers used for JavaScript (“setTimeout/setInterval”) and GIF animations are very low-resolution-- they’ll drift several milliseconds in no time at all.
Like so many things on the web, browsers do what they do.
If it’s really critical that the images remain in-sync, you should put the frames in a single image, or use something like a Silverlight or Flash movie where you can control the timing precisely.
Thanks for the help!
I found a Wordpress plugin that forces all images to pre-load. It is working very well on Firefox, even on a very old computer. It works just ok on Chrome. The third image is a bit out of sync.
I guess the best would be to combine the three gifs into one.
Instead of an animated GIF, you could provide separate images, preload them, and use scripting to advance to the next image of all three at once. If combining them isn’t an option, that might be your best bet.
Combining the three GIFs was easier than I thought. In case you wonder, this is the final GIF:
I made the main image in SketchUp, animated with After Effects and converted to GIF with VirtualDUB
Question 7:
Assume Earth’s average gravitational pull and a 30 degree slope over 8km. A beach ball rail gun fires a warning shot. How many seconds before the giant man gets angry? How angry?
The page this came from is some commentary on the movie Gravity. I heard so many times that there’s no gravity in space that I decided to write a small article about the matter.
The curvature shown in the GIF is the natural curvature of Earth. The ground “drops” about 5 meters for every 8000 meters traveled in any direction (assuming it is a perfect sphere).
Also an object under the influence of gravity will fall 5 meters in the first second.
So an object thrown perpendicular to the ground at 8000m/s will drop 5 meters after one second, but also the ground will have “dropped” below the object 5 meters. The object essentially is now a satellite!
I tried making the sketch in scale, but the man became a tiny blob and the curvature was so small that the ground was essentially a straight line. So I had to exaggerate it a bit. The five meters drop is actually 200-250 meters in scale. That makes the man 150 meters tall and the ball 60-70 meters in diameter!