页面加载时的随机图像

Posted 2023-03-16

【中文标题】页面加载时的随机图像

【英文标题】：Random Images on page load

【发布时间】：2017-02-20 22:24:43

【问题描述】：

我目前正在构建一个网站，他们希望加载的每个图像都显示不同的图像。到目前为止，我已经能够定位这些并将它们随机化，但它将相同的图像应用于所有项目。如果你能看到我哪里出错了，那就太好了

var description = [
  "http://placehold.it/300x300",
  "http://placehold.it/200x200",
  "http://placehold.it/100x100"
];

var size = description.length
var x = Math.floor(size*Math.random())

$('.item img').each(function() 

    if($("img").hasClass("people")) 
        $(this).attr("src",description[x]);
    
);

【参考方案1】：

x 不会改变。您可以在$.each() 中使用setTimeout() 将数组的随机元素推送到不重复的数组中；使用选择器 $(".item img.people") 设置 <img> src 和 .attr(function) 迭代原始选择器集合中的所有元素

var description = [
  "http://placehold.it/300x300",
  "http://placehold.it/200x200",
  "http://placehold.it/100x100"
];

var arr = [];

$.each(description,
  function(i, el) 
    setTimeout(function() 
      arr.push(el);
      if (arr.length === description.length) 
        $(".item img.people")
          .attr("src", function(i, src) 
            return arr[i]
          )
      
    , 1 + Math.floor(Math.random() * 5))
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="item">
  <img class="people" >
  <img class="people" >
  <img class="people" >
</div>

【讨论】：

谢谢你，我喜欢这个！

【参考方案2】：

您的代码似乎有 2 个问题：

您的随机数发生器位于 .each 循环之外。因此，为什么您的所有图像都得到相同的图像。

所有图像都获得 src 属性，即使是那些没有 people 类的图像。

不过，您几乎做对了。试试我对这些更正所做的fiddle，或者下面的演示。

var description = [
  "http://placehold.it/300x300",
  "http://placehold.it/200x200",
  "http://placehold.it/100x100"
];

var size = description.length;
$('.item img').each(function() 
  var x = Math.floor(size * Math.random()); //move random inside loop
  if ($(this).hasClass("people"))  //replace "img" with "this"
    $(this).attr("src", description[x]);
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <img src="" class="people">
</div>
<div class="item">
  <img src="" class="people">
</div>
<div class="item">
  <img src="">
</div>
<div class="item">
  <img src="" class="people">
</div>

请注意，这里有 4 个 items，但其中一个没有 people 类并且没有正确设置为图像（只有 3 个）。

【参考方案3】：

您的代码中有一些错误。你定义 if($("img". 并检查第一个 img 但你想要每个 img

var description = [
  "http://placehold.it/300x300",
  "http://placehold.it/200x200",
  "http://placehold.it/100x100"
];

var size = description.length

$('.item img').each(function(i,e) 
   var x = Math.floor(Math.random() * size)
    if($(this).hasClass("people")) 
        $(this).attr("src",description[x]);
    
);

【参考方案4】：

您不应在全局范围内定义随机数。可能下面的代码会对你有所帮助。

var description = [
  "http://placehold.it/300x300",
  "http://placehold.it/200x200",
  "http://placehold.it/100x100"
];

var size = description.length;
var x=0;

$('.item img').each(function() 
   x = Math.floor(size*Math.random());

  if($(this).hasClass("people")) 
       $(this).attr("src",description[x]);
   
);