在页面加载时，将随机图像放入 div答案

【问题标题】：On load of page, put random image in div在页面加载时，将随机图像放入 div
【发布时间】：2013-09-03 18:32:20
【问题描述】：

我将图像物理存储在服务器上，而我想将其中一个随机放入一个特定的 div 中，该 div 存在于我网站的每个页面上。

这是我目前得到的代码：

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

但是 div 有一个其他 div 有的类，所以我也把它放在一个 id 上：

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

现在我想知道两件事：

我应该使用 jQuery 的什么功能，因为我找不到像 onload 这样的东西。
我是否正确使用了 div 的 id 和 class 名称？（我还没有测试过，因为我没有 jQuery 功能）。

附：我正在从数据库中检索 HTML 并直接加载它，如果需要我不能修改它。

更新：

我使用以下代码：

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

但我得到的只是alt的值，而不是图片本身...

【问题讨论】：

标签： javascript jquery html image onload

【解决方案1】：

你可以这样做：

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

试试这个CodePen 并刷新一下。

【讨论】：

:D 我们在想同样的事情。
@FrontEndGuy - 不，它不起作用。我也尝试了 Slinky 的方式 -> $("#adv.onSideSmall").html... 但不再起作用。我尝试在 div 中直接输入img 标签（不使用 JS）：<div class="onSideSmall" id="adv"> <img src="..somewhere\gagaga.jpg" alt="ad 3" /> </div> 我只得到alt 文字，但没有图片......有什么想法吗？
你能把你所拥有的东西摆弄一下吗？

【解决方案2】：

如果您只是将图像加载到 div 中，我只需将 div id 添加到类名中。

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

【讨论】：