Question

My goal is to have an image preload while it is loading the actualy image, but I can’t quite figure it out. The whole goal for this is that I have a slideshow that displays an image, but sometimes it is slow to load.. lol. Here’s my HTML:

<div id="slideshow">
    <img src="../images/slideshow/spacer.gif" width="100" height="100" id="myPicture" alt="some image">
</div>

Here’s my javascript I have already:

window.onload = choosePic;

function choosePic() {
    var myPix = new Array("../images/slideshow/sempiternal.png", "../images/slideshow/cross.png", "../images/slideshow/pentagram.png");
    var randomNum = Math.floor((Math.random() * myPix.length));
    document.getElementById("myPicture").src = myPix[randomNum];
}

And the CSS:

#slideshow {
    height: 100px;
    width: 100px;
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Answer 1

Doesn’t seem like your function will preload anything. Apart from the random image selected which loads normally, the other images in the array will not be called at all.

You might want to check out JavaScript Preloading Images and Function to preload images? instead.