I decided to make it myself because it needs to run at ~100ms intervals, and without any special transition effects (see it [here][1]), so I figured it was unnecessary to include a big library like JQuery just for just a simple application.
This is the code I am currently using [edit: original code - now modified]:
// JavaScript Document function preloadimages(arr){ // the preloadimages() function is adapted from http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml var newimages = [], loadedimages = 0; var postaction = function() {}; var arr = (typeof arr != "object") ? [arr] : arr; function imageloadpost() { loadedimages++; if (loadedimages == arr.length) { postaction(newimages); //call postaction and pass in newimages array as parameter } } for (var i = 0; i < arr.length; i++) { newimages[i] = new Image(); newimages[i].src = arr[i]; newimages[i].onload = function() { imageloadpost(); } newimages[i].onerror = function() { imageloadpost(); } } return { //return blank object with done() method done: function(f) { postaction = f || postaction; //remember user defined callback functions to be called when images load } } } /* USAGE: preloadimages(['ed.jpg', 'fei.jpg', 'budapest.gif', 'duck.jpg']).done(function(images) { images.sort(function(a, b) { return a.width - b.width; //sort images by each image's width property, ascending }); alert(images[0].src); //alerts the src of the smallest image width wise }); */ function animateSlideshow() { var num = window.imgNum + 1 ; if (num >= d['imgs'].length) { num = 0; } window.imgNum = num; imgTag.src = d['imgs'][num]; var t = window.setTimeout(function(){animateSlideshow(imgNum, imgTag, d)}, 100); } var d; var imgTag; var imgNum = 0; $.onDomReady (function () { // This is not JQuery, it's a simple cross-browser library which you can read here: http://assets.momo40k.ch/common/js/$.js // data is an array that should be already defined on the calling page, // containing all the necessary information to generate all the rotation slideshows on the page for (i = 0; i < data.length; i++) { d = data[i]; var div = document.getElementById(d['id']); imgTag = $.Elements.getElementsByClassName('theImage', div)[0]; // preload the images... preloadimages(d['imgs']).done(function(images) { imgTag.src = d['imgs'][0]; animateSlideshow(); }); } });
... HTML document ...