Menu
I'm trying to create a fairly simple piece of JavaScript that displays a random image from an array each time the page loads. I need to figure out a way to get this running without adding code to the body tag. Is there a way to accomplish this without, say, an onload function placed in the body tag?
Here's what I have that relies on the onLoad:
ImageSwitch=new Array();
ImageSwitch[0]='1.jpg';
ImageSwitch[1]='2.jpg';
ImageSwitch[2]='3.jpg';
ImageSwitch[3]='4.jpg';
function swapImage()
{
document.getElementById("theImage").setAttribute("src", ImageSwitch[
Math.round(Math.random()*3)])
}
Any alternative ideas to accomplish this?
817
Wombleton's answer is what I would do. However, there is another way to do it. In the body markup, wherever you are going to put that random image, put a script that does a document.write with the markup for the image. Make sure you have an array of image URLs and substitute, like so:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var imageURLs = [
"http://www.myserver.com/images/image1.png"
, "http://www.myserver.com/images/image2.png"
, "http://www.myserver.com/images/image3.png"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(getImageTag());
</script>
</body>
</html>
Again, this is not ideal, but is useful if you don't want to use any kind of onload event, not just the one you put in the <body> tag.
105
Adapted from jQuery's ready function, and making some assumptions about the image types:
(function() {
var urls = ['1', '2', '3', '4'];
function swap() {
document.getElementById('theImage').setAttribute('src', urls[Math.round(Math.random() * urls.length)] + '.jpg');
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
window.addEventListener( 'load', swap, false );
// If IE event model is used
} else if ( document.attachEvent ) {
window.attachEvent( 'onload', swap );
}
})();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
