Display random image when page loads without utilizing onload in the body tag

后端未结

关注

 9  735

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 runnin

相关标签:

9条回答

别跟我提以往

2021-01-06 06:30

Add image in array with full path or directory path, after refresh page image add in body tag like <body background="images/image1.jpg">

<script type="text/javascript">
function changeRandomimage() {
    var imageArray = ["images/image1.jpg","images/image2.jpg","images/image3.jpg"];
    var randomImage = Math.floor(Math.random() * imageArray.length);
    document.body.background = imageArray[randomImage];
}
changeRandomimage();
</script>

0 讨论(0)

無奈伤痛

2021-01-06 06:42

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 );
  }
})();

0 讨论(0)

独厮守ぢ

2021-01-06 06:43

you don't need an onload in the body tag- add a handler in the script, in the head, or in another script that loads before the body .

(function(){
  var fun=function(){
  // definefunction
  }
  if(window.addEventListener){
      window.addEventListener('load', fun,false);
      else if(window.attachEvent)window.attachEvent('load', fun);
 })();

0 讨论(0)

情歌与酒

2021-01-06 06:44

You could just use document.write to generate the img tag. Or even something like <img src="javascript:Math.round(Math.random()*3)+'.jpg';" />

0 讨论(0)
发布评论:

提交评论
- 加载中...
甜味超标

2021-01-06 06:48

You could place this in javascript at the bottom of the page, with a timeout.

setTimeout(swapImage, 500); or somesuch.

0 讨论(0)
发布评论:

提交评论
- 加载中...

时光取名叫无心

2021-01-06 06:53

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.

0 讨论(0)

1 2 下一页