ansaurus

Question

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

Answer 1

A:

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

setTimeout(swapImage, 500); or somesuch.

Duracell 2010-05-05 23:44:09

Answer 2

A:

Just don't put you javascript inside a function.

if you take it out of the function it will run when the page loads.

When it's in the function, it won't run unless called.

Senica Gonzalez 2010-05-05 23:44:58

You have to be careful with this. If it's in the wrong place the javascript can be called before the element ("theImage") exists. This will lead to errors.

Duracell 2010-05-05 23:47:47

Answer 3

+2 A:

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

wombleton 2010-05-05 23:47:46

Answer 4

A:

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.

Robusto 2010-05-06 00:04:08

Answer 5

A:

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

Tgr 2010-05-06 00:41:54

Answer 6

A:

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

kennebec 2010-05-06 02:52:02

ansaurus

tags:

views:

answers:

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

related questions