FWIW: To swap one image. The below example using the
.src swap should be supported by all browsers. Just use
a quick loading small byte image to swap with until the
larger image loads.
<script type="text/javascript">
<!-- Begin Hide //
var myImage = new Image();
myImage.src = 'LARGE.jpg';
function chkLoad() {
if (myImage.complete) {
document.images['theImage'].src='LARGE.jpg';
clearTimeout(isLoaded);
}
if (!myImage.complete) {
document.images['theImage'].src='SMALL.jpg';
isLoaded = setTimeout('chkLoad()',100);
}
}
// End Hide -->
</script>
</HEAD>
<BODY onload="chkLoad()">
<img name="theImage" src="" alt="This is a picture">
And, looping thru an image array. The following should
Post-Load all of the document.images to enable the page
to quickly render and display the "Images Loading" image,
while the larger images load. Thus, allowing a quick page
display even for the most graphic intensive documents.
(Note: This has not been fully tested with real images)
Change what is highlighted in red to reflect your images.
<script type="text/javascript">
<!-- Begin Hide //
imagesLoading = new Image();
imagesLoading.src = 'MY_SMALL_IMAGES_LOADING.jpg?';
theImages = ('img1.jpg,img2.jpg,img3.jpg,img4.jpg,img5.jpg,img6.jpg,img7.jpg');
function chkLoad() {
theImages = theImages.split(',');
for(i=0;i<theImages.length;i++) {
myImage = new Image();
myImage.src = theImages[i];
if (document.images[i].complete) {
document.images[i].src = myImage.src;
clearTimeout(isLoaded);
}
if (!document.images[i].complete) {
document.images[i].src = imagesLoading.src;
isLoaded = setTimeout('chkLoad()',100);
}
}
}
// End Hide -->
</script>
</HEAD>
<BODY onload="chkLoad()">
<img src="" alt="This is a picture">
<img src="" alt="This is a picture">
<img src="" alt="This is a picture">
<img src="" alt="This is a picture">
<img src="" alt="This is a picture">
<img src="" alt="This is a picture">
<img src="" alt="This is a picture">
<img src="" alt="This is a picture">
.....Willy
Edit: Added a querry ? to the Images Loading Image to prevent
any possible conflict with the image being loaded numerous times.
(Note: This may need to be removed if it prevents caching of the image)