Display Random Image When Page Loads Without Utilizing Onload In The Body Tag

February 28, 2024 Post a Comment

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 withou

Solution 1:

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><scripttype="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"
  ];
  functiongetImageTag() {
    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><scripttype="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.

Solution 2:

Adapted from jQuery's ready function, and making some assumptions about the image types:

(function() {
  var urls = ['1', '2', '3', '4'];
  functionswap() {
    document.getElementById('theImage').setAttribute('src', urls[Math.round(Math.random() * urls.length)] + '.jpg');
  }

  // Mozilla, Opera and webkit nightlies currently support this eventif ( document.addEventListener ) {
    window.addEventListener( 'load', swap, false );
  // If IE event model is used
  } elseif ( document.attachEvent ) {
    window.attachEvent( 'onload', swap );
  }
})();

Solution 3:

With a few changes this code will load images randomly and his respective link to load.

<!DOCTYPE html><html><head><title>Jorgesys Html test</title><scripttype="text/javascript">var imageUrls = [
       "http://prueba.agenciareforma.com/appiphone/android/img/newspapers/stackoverflow.png"
     , "http://ww.mydomain.com/img/newspapers/reforma.png"
     , "http://ww.mydomain.com/img/newspapers/nytimes.png"
     , "http://ww.mydomain.com/img/newspapers/oglobo.png"
     , "http://ww.mydomain.com/img/newspapers/lefigaro.png"
     , "http://ww.mydomain.com/img/newspapers/spiegel.png"
  ];
 var imageLinks = [
       "http://www.stackoverflow.com"
      , "http://www.reforma.com"
       , "http://www.nytimes.com/"
      , "https://oglobo.globo.com/"
      , "http://www.lefigaro.fr/international/"
     , "http://www.spiegel.de/international/"    
  ];

  functiongetImageHtmlCode() {
    var dataIndex = Math.floor(Math.random() * imageUrls.length);
    var img = '<a href=\"' + imageLinks[dataIndex] + '"><img src="';        
    img += imageUrls[dataIndex];
    img += '\" alt=\"Jorgesys Stackoverflow.com\"/></a>';
    return img;
  }
</script></head><bodybgcolor="white"><scripttype="text/javascript">document.write(getImageHtmlCode());
</script></body></html>

Solution 4:

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

setTimeout(swapImage, 500); or somesuch.

Solution 5:

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.

JavaScript Programmer Calgary