On load of page, put random image in div

问题:

I have the images physically stored on the server, whereas I want to put one of them, randomly, in one particular div, that exists on every page of my website.

This is the code I've got so far:

function randomFromInterval(from, to) {
     return Math.floor(Math.random() * (to - from + 1) + from);
}

$(document).ready(function () {
  var number = randomFromInterval(1, 3)
  $("#adv").<--some jQuery functionality here-->(function (e) {
    switch (number) {
      case 1:
        $(".onSideSmall").html('<img src="..\somewhere\someImg_1.png" alt="some_text" />');
        break;
      case 2:
        $(".onSideSmall").html('<img src="..\somewhere\someImg_2.png" alt="some_text" />');
        break;
      case 3:
        $(".onSidesmall").html('<img src="..\somewhere\somsomeImg_3.png" alt="some_text" />');
        break;
     }
   });
 });

But the div has a class that other divs have, so I put it an id as well:

<div class="onSideSmall">
</div>
<div class="onSideSmall">
</div>
<div class="onSideSmall" id="adv">
</div>

And now I am wondering 2 things:

• What functionality of jQuery should I use, because I couldn't find anything like onload or whatever.

• Am I using the id and class names of the div correctly? (I haven't tested it yet, since I don't have the jQuery functionality).

P.S. I am retrieving the HTML from database and loading it directly, and I can NOT modify it if needed.

UPDATE:

I went with the following code:

$(document).ready(function () {
            var number = randomFromInterval(1, 3)
            switch (number) {
                case 1:
                    $("#adv").html('<img src="..somewhere\asd.jpg" alt="ad 1" />');
                    break;
                case 2:
                    $("#adv").html('<img src="..somewhere\dadada.jpg" alt="ad 2" />');
                    break;
                case 3:
                    $("#adv").html('<img src="..somewhere\gagaga.jpg" alt="ad 3" />');
                    break;
            }
        });

but what I get is only the value of the alt, but not the picture itself...

回答1:

You can do something like this:

function randomFromInterval(from, to) {
     return Math.floor(Math.random() * (to - from + 1) + from);
}

$(document).ready(function () {
  var ranNumber = randomFromInterval(1, 3)
  var picture = null;
  switch(ranNumber) {
    case 1:
    picture = '<img src="http://placehold.it/550x150">'
    break;
    case 2:
    picture = '<img src="http://placehold.it/150x250">'
    break;
    case 3:
    picture = '<img src="http://placehold.it/350x150">'
    break;  
  }
  $("#adv").html(picture);
 });

Try out this CodePen and refresh it a bunch.

回答2:

If you're just loading the image into the div I would just add the div id into the class name.

function randomFromInterval(from, to) {
     return Math.floor(Math.random() * (to - from + 1) + from);
}

$(document).ready(function () {
  var number = randomFromInterval(1, 3)
  var img = ''
  switch (number) {
    case 1:
      img = '<img src="..\somewhere\someImg_1.png" alt="some_text" />';
      break;
    case 2:
      img = '<img src="..\somewhere\someImg_2.png" alt="some_text" />';
      break;
    case 3:
      img = '<img src="..\somewhere\somsomeImg_3.png" alt="some_text" />';
      break;
   };
   $("#adv.onSideSmall").html(img);
 });