Richard Rutter provides an excellent script for achieving Onload image fades without Flash, which is plain marvellous. The more Flash I can do away with, the happier I'll be. Flash is great for applets, games, and toons, but is pretty nasty for navigation, general page UI, and this sort of thing.
I've extended Richard's script to support a cascading load of multiple images, which suited my purposes better. Hopefully someone out there finds this useful. Thanks for the help with this Ryan! You can also replace the window.setTimeout with window.setInterval for a somewhat interesting/amusing/useless stuttery effect. The only variable you should have to tweak is delay and numPhotos.
Update: Nick provided a nice update to the code which removed the necessity to specify the number of images in the array. Thanks!
Example
The Code
stick this in your <head>:
<script type="text/javascript">
<!--
document.write("<style type='text/css'>.hideimg {visibility:hidden;}</style>");
function initImage() {
i = 1;
while (true) {
imageId = 'theimg' + i;
obj = document.getElementById(imageId);
if (obj == null) break;
setOpacity(imageId, 0);
obj.style.visibility = "visible";
fadeIn(imageId);
i++;
}
}
delay=15;
function fadeIn(objId) {
opacity = 1;
if (document.getElementById) {
while (opacity <= 100) {
window.setTimeout("setOpacity('"+objId+"',"+opacity+")", delay);
opacity += 1;
delay += 10; // modify to change fade speed
}
}
}
function setOpacity(objId, opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2 Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
}
window.onload = function() {initImage()}
// -->
</script>
<img src='images/squid1.jpg' alt='Photo' width="100" height="76" class="hideimg" id='theimg1' />
<img src='images/squid2.jpg' alt='Photo' width="100" height="76" class="hideimg" id='theimg2' />
etc...
Thanks :)