CODEWITHSUNDEEP
javascripthtmlimagerandom
Insignian
Insignian

Reputation: 59

Is there an easier way to load random images?

I don't think I explained this properly, but I ended up answering my own question, basically I was looking remove the head code because it made the document look ugly and was very tedious everytime when it came to scrolling, I put the head javascript code into it's file and removed the code from index head section and it seems to be working just fine.

Thanks all for the help!

/close /answered

Can anybody point towards an easier method to load random images on my index.html page?

This is the current method I'm using

In the head section:

// It currently goes to css/images/images/410.png, I have just put six here so it isn't long and annoying

<script type="text/javascript">
var imageURLs = [
   "css/images/avatars/1.png"
 , "css/images/avatars/2.jpg"
 , "css/images/avatars/3.png"
 , "css/images/avatars/4.png"
 , "css/images/avatars/5.png"
 , "css/images/avatars/6.png"
 ];
 function getImageTag() {
 var img = '<img src=\"';
 var randomIndex = Math.floor(Math.random() * imageURLs.length);
 img += imageURLs[randomIndex];
 img += '\" alt=\"Oh no, the image is broken!\"/>';
 return img;
 }
 </script>

In the body section:

    <!-- RANDOM IMAGE 1 -->
    <script type="text/javascript">
    document.write(getImageTag());
    </script>
    <!-- RANDOM IMAGE 2 -->
    <script type="text/javascript">
    document.write(getImageTag());
    </script>

I currently have 410 images altogether so you can image how annoying it is within the head section code

Upvotes: 0

Views: 770

Answers (1)

Michał Sałaciński
Michał Sałaciński

Reputation: 2266

If your images are all named like that, this should work:

<script type="text/javascript">
var imagesCount = 410;
 function getImageTag() {
 var img = '<img src=\"css/images/avatars/';
 var randomIndex = 1+Math.floor(Math.random() * imagesCount );
 img += randomIndex;
 img += '.png\" alt=\"Oh no, the image is broken!\"/>';
 return img;
 }
 </script>

Upvotes: 2

Related Questions