In a continuation from my previous post I’m still trying to find a good solution for a rotating header. I wanted to stay away from flash. Partly because I’m not very familiar with flash & I wanted to be a little more universally compatible. I’ve tried an animated .gif, which works, but its 800K! Not very dial-up compatible. Even lags a sec on my high-speed.
I’m now looking into using javascript to auto-rotate a list of graphics. I’ve done this previously in conjunction with a webcam but now don’t remember exactly how I did it. I figure this may be the most efficient solution as 1) it stays away from flash 2) is more bandwidth friendly.
EDIT: As I’m writing this I’m wondering if the javascript option really is more bandwidth compatible. I guess I’ll need to compare file sizes between all the .gifs and the animated result. If its comparable that really wont save me anything in the end. Am I avoiding flash when it may be the best solution? Ugh. I hate web design lol.
Regarding whether the javascript option really is more bandwidth-friendly:
Whichever solution you use you will need to have data representing each of the images used. In the case of an animated gif those are all smashed into one file. I’m not sure exactly how a Flash movie is encoded — ie. whether the images would be stored individually or as frame differences — but either way, unless the images have some coherency, you’ll be storing the full data for all images in the Flash movie as well. Finally, for the javascript option you also need to have the data for all images, but they can be stored in separate files.
The only difference in total bandwidth you’ll get between solutions will be due to the overhead of each. How much overhead does the movie timing in flash add? How much overhead does the animated gif format add? How much overhead does the javascript have?
Seeing as that you can build the requisite javascript in about 10-15 lines of code, I’m guessing the size of the javascript overhead is on the order of ~100 bytes. I doubt either of the solutions will have an overhead significantly (order of magnitude) smaller. And compared to the size of the images, the javascript overhead is definitely negligible.
Additionally, with a javascript solution — as I mentioned above — you have the bonus of being able to transfer the images separately. As a result, you can display the first image as soon as it’s arrived; with flash or an animated gif you need to wait for the whole payload to arrive before it can begin playing. And if the second image takes longer to come over, you can just delay replacing the image until the second one gets there.
For this situation[1], I’d definitely choose the javascript option. It even degrades gracefully — if the client doesn’t have javascript enabled, they still see the first image, just no rotation.
Jacob Fugal
[1] Obvious disclaimer: Other situations may call for other solutions. I’d hate to have to write a Home Star Runner movie using image replacement in javascript. 🙂
Sadly, if you’re looking at 800kB in pictures like that, the solution is simple: don’t.
That said, for things like this, I’ve seen flash (sorry) do simply *amazing* things that I couldn’t dream of doing otherwise. This is mostly in terms of file size and animation. I don’t know the specifics, but for something that’s going to be 800kB in raw pictures, flash WILL save you a LOT of bandwidth (if you do it right). Several hundred kB (likely well over 650-700), unless you’ve got things like motion video going on.
Universal compat. with flash? Good question. The site is obviously biased a bit, but they can only fake their figures so much: http://www.macromedia.com/software/player_census/flashplayer/
(I can’t believe I just recommended flash for something… though in all honesty, I wouldn’t be doing stuff like that in the first place, so whatever :))
Using JavaScript is an option, even though it may not be the best. However, it is really easy setting up.
Just setup an array with each element in the array holding the image location on the server. Then setup a timer to rotate through the elements every 3 seconds, or whatever. Finally, put your newly created JavaScript function in the HTML image tag and your set.
As far as bandwidth, however, constantly pulling images may infact increase your bandwidth in the long term, then a single 800KB image that is only called once. I guess you would have to decide what is more important. Your bandwidth, or the load time of the user.
Try this:
<!–
function setimage()
{
var thedate=new Date(); //get the date from the computer
var nday=thedate.getDate(); //extract the day (0-6) from the date
var str=’image’+nday+’.jpg’; //create the image file name: ‘imageX.jpg’, where X is the day
document.images[‘image’].src=str; //assign the image file name
}
You will also need to add the following to the body:
onLoad=”setimage()”
This allows for a daily changing of your banner or image. All you need to store all your images in the same folder as your page. You also need to name each image as follows: image1, image2, image3 etc.