Forum Moderators: open
As soon as each image is loaded I would like the user to be able to interact with the "pile".. eg click on a button and shuffle through the images that have been loaded to date.
I am aware of techniques for preloading images and also of the trick for getting them in a script block (with a hidden style) just before /body. However, I don't get any user interactivity until the script has finished executing (and ALL the images loaded).
So I want to get some technique for allowing the page to be complete enough for users to interact with it even though all the images have not been loaded.
Is there some way I can use setTimeout to do the image loading in the background? or XMLHTTPRequest?
thanks
I don't understand this. Could you post the relevant code?
<script type="text/javascript" src="wz_dragdrop.js"></script>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
</head>
<body>
<h1> hello there fred </h1>
<p>
<img id="myimg1" src="images/England_4.jpg" height=200 width=200>
</p>
<script>
allImagesLoaded = false;
imgNum=0;
var imageSet =new Array();
function changeImage(){
var anImage = document.getElementById('myimg1');
if (allImagesLoaded) {
anImage.src =imageSet[imageSet.length-1].src;}
else
{document.body.bgColor = "Yellow";}
}
</script>
<button onclick="changeImage()">
click me to change image
</button>
<!-- ======================================================
preload images need for site by using css.. this will
use the browser in background mode to fetch stuff,
but these will never be displayed ie the user experience
is unaffected
====================================================== -->
<script>
function loadImage2Cache(imgName) {
imageSet[imgNum] = new Image();
imageSet[imgNum].src="images/"+imgName;
self.defaultStatus = imgName;
self.status = imgName;
imgNum++;
}
loadImage2Cache("Australia_2.jpg");
loadImage2Cache("Australia_3.jpg");
loadImage2Cache("Australia_4.jpg");
loadImage2Cache("England_5.jpg");
loadImage2Cache("England_6.jpg");
loadImage2Cache("EasterIsland_1.jpg");
loadImage2Cache("EasterIsland_2.jpg");
loadImage2Cache("Bali1.jpg");
loadImage2Cache("Bali2.jpg");
loadImage2Cache("Bali3.jpg");
loadImage2Cache("Capri2.jpg");
loadImage2Cache("Bali2.jpg");
allImagesLoaded = true;
</script>
<!-- ======================================================
<img class="hiddenPic" src="images/Australia_2.jpg" >
<img class="hiddenPic" src="images/Australia_3.jpg" >
<img class="hiddenPic" src="images/Australia_4.jpg" >
<img class="hiddenPic" src="images/England_5.jpg" >
<img class="hiddenPic" src="images/England_6.jpg" >
<img class="hiddenPic" src="images/EasterIsland_1.jpg" >
<img class="hiddenPic" src="images/EasterIsland_2.jpg" >
<img class="hiddenPic" src="images/Bali1.jpg" >
<img class="hiddenPic" src="images/Bali2.jpg" >
<img class="hiddenPic" src="images/Bali3.jpg" >
<img class="hiddenPic" src="images/Capri2.jpg"
onload='alert("done");'>
====================================================== -->
<!-- ======================================================
onload='document.body.bgColor="Red";'>
====================================================== -->
</body>
</html>
