All geek questions in one place

Display random image on page load without using onload in body tag

I am trying to create a pretty simple JavaScript snippet that displays a random image from an array every time a page loads. I need to figure out a way to accomplish this without adding code to the body tag. Is there a way to accomplish this without, say, the onload function placed in the body tag?

Here is what I have, depends on 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 for this?

+4
source share
9 answers

Wombleton's answer is what I would do. However, there is another way to do this. In the body markup, wherever you send this random image, put a script that executes document.write with markup for the image. Make sure you have an array of image URLs and replace them:

 <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 useful if you do not want to use any onload event, and not just the ones you put in the <body> .

+12
source

Adapted from the jQuery ready function and makes some assumptions about 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 ); } })();
+3
source

With a few changes, this code will upload images randomly and its corresponding download link.

  <html> <head/> <title>Jorgesys Html test</title> <script type="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/" ]; function getImageHtmlCode() { 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> <body bgcolor="white"> <script type="text/javascript"> document.write(getImageHtmlCode()); </script> </body> </html>
+1
source

You can put this in javascript at the bottom of the page with a timeout.

setTimeout (swapImage, 500); or something similar.

0
source

Just don't put javascript inside a function.

if you select it from the function that it will perform when the page loads.

When it is in a function, it will not work unless called.

0
source

You can simply use document.write to create an img tag. Or even something like <img src="javascript:Math.round(Math.random()*3)+'.jpg';" /> <img src="javascript:Math.round(Math.random()*3)+'.jpg';" />

0
source

you do not need 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
source

Your answer can be found at glados.cc/myfaucet.
there is a script to download there that has the code you are looking for here is a quick overview: create a config.php file and put this inside:

 <?php // Advertisement Codes // All ads rotate. There are 3 types: square, text, and banner. Add HTML code to the array $squareAds = array('<iframe scrolling="no" style="border: 0; width: 250px; height: 250px;" src="http://myadserver.com"></iframe>'); $textAds = array('<p><strong><a href="http://yoururl.com">YourURL</a></strong></p>', '<p><strong>Get your own site</strong> <a href="http://yoursite.com">here</a></p>'); $bannerAds = array('<iframe scrolling="no" style="border: 0; width: 468px; height: 60px;" src="http://youradserver.com"></iframe> '); ?>

Then on the page where you, say, index.php, show your random links or images or text, simply put:

 <?php require_once('config.php'); function getAd($arr){ return $arr[rand(0, count($arr)-1)]; } echo "any plain text or html" . getAd($textAds) . "any plain text or html" . getAd($bannerAds) . "any plain text or html" . getAd($squareAds) . "any plain text or html"; ?>

Of course, you can create as many $ xxxAds arrays and name them as you want, and you can fill the arrays with any displayed html or jscript, as well as an unlimited number for each array in csv format, you can also create as many new getAd functions with different names to you could run multiple unique iframes on the same page

0
source

Add the image to the array with the full path of the path or directory, after updating the page image, add the body tag, for example <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
source

Source: https://habr.com/ru/post/1308946/

More articles:


All Articles