Forum Moderators: open
I have a series of photos taken driving down a street (375 photos, each 110k), that I want to be able to display in an animated sequence. Lots of data to download, which is where the problem lies.
I have a preload function in the <head> that has the photo file names in an array, and I've set up a loop to preload each image. The final step of the preload function is to call a timer function that displays each photo in turn at a specified rate.
The problem I'm having is that the preloads don't always finish before the timer function starts. I need to have all the loads done up front, so that the animation is smooth. If the preloads haven't finished, I end up dropping a lot of the frames.
Any ideas? Thanks.
muirfield
This process belongs in Flash so you can stream it and control the entire process.
The only thing that comes to me is that your preload is not actually loading the images (post code.) I used to have some code somewhere (someone will hopefully provide a link here, or you can search for some examples) that read in the file sizes as it loads to verify it's actually preloading.
Even so, on something this cool I would still do it in Flash.
var downloadCountdown = 375;function preload(urls)
{
for(var k=0, url, img; url=urls[k++];)
{
img = new Image;
img.onload = downloadCount;
img.src = url;
urls[k] = img;
}
}function downloadCount()
{
if(--downloadCountdown==0)
// ..or start the animation
alert('ready!')
}
Bernard, your solution worked - the animation doesn't start until all the images have been loaded. Thanks!
Rocknbil, yep, Flash is probably the way to go once I get some time to learn it. Thanks for your suggestion.
muirfield
