刷新时随机背景图像答案

【问题标题】：Random background image on refresh刷新时随机背景图像
【发布时间】：2023-04-02 01:54:01
【问题描述】：

我试图在每次用户访问该网站时随机加载一张图片。我已经关注了一个教程和几个关于这个问题的先前线程，但似乎无法让它工作。图像位于 /images/ 文件夹中，并且文件名已正确输入到数组中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<script type="text/javascript">
  var images = ['OUT01ari.jpg' 'OUT02adobe.jpg' 'OUT03alife.jpg' 'OUT04chinup.jpg' 'OUT05datenightwinecologne.jpg' 'OUT06officechair.jpg' 'OUT07printer.jpg' 'OUT08whitewall.jpg' 'OUT09umbrella.jpg' 'OUT10converse.jpg' 'OUT11wardrobebar.jpg'];

  $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

</script>

然后我在页面正文中输入了 div，但无济于事：

<body>

<div ="#background"></div>
<div class="container">

</div>
</body>

我哪里错了？

【问题讨论】：

标签： jquery image web

【解决方案1】：

定义数组时，数组值之间必须有逗号分隔符。

您还应该有两个单独的脚本元素，一个用于包含 jquery，另一个用于您的代码。

带有 src 属性的脚本标签的内容应该被大多数浏览器忽略。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script>

<script type="text/javascript">
 var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg'];
 $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
</script>

W3C 4.3 Scripting HTML5 说：

如果有 src 属性，则该元素必须为空或仅包含与脚本内容匹配的脚本文档限制。

我相信早期版本也是如此。

编辑：

如果您正在使用本地文件系统，请确保将 jQuery 的 URL 更改为 http:// 而不仅仅是 //。

此外，通过调用document ready，确保在#background 元素存在时执行您的脚本。

这个例子甚至应该在本地工作：

<html>
 <head>
  <style type="text/css">
   #background { 
    position:fixed; left: 0px; 
    top: 0px; background-size:100%;  
     width:100%; height:100%; 
     -webkit-user-select: none; -khtml-user-select: none; 
     -moz-user-select: none; -o-user-select: none; user-select: none; 
      z-index:9990; 
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script>
  <script type="text/javascript">
   $(function() {
    var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg'];
    $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
   });
  </script>
 </head>
 <body>
  <div id="background"></div>
  <div class="container">
  </div>
 </body>
</html>

【讨论】：

谢谢，我已经修改了这些错误以及 isherwood 和 jacouh 指出的错误，但图像仍然没有加载。
我创建了一个有效的小提琴：jsfiddle.net/ffXUC - 虽然很难说为什么你的不是。您是否检查过浏览器控制台/Web 开发人员工具（Chrome 中的 F12）是否有任何错误？
谢谢 - 不，我没有。我得到的错误是： Uncaught ReferenceError: $ is not defined index.html:11 (anonymous function)。第 11 行是： $ ('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'} );
我编辑了我的答案 - 我猜 $ 错误可能是因为您在计算机上本地工作而发生的？然后 src url 中的 // 将尝试从文件系统中获取 jQuery。您还应该在文档准备好时执行脚本，否则 #background 元素将不存在。我在上面编辑了我的答案并添加了一个适用于本地的示例。
谢谢。我为字母写了您的 jQuery 代码字母，但缺少最初的 function() 调用。唯一的问题是经常没有图像加载，我认为这与用于确定随机图像加载的数学有关？

【解决方案2】：

<div ="#background"></div>

应该是

<div id="background"></div>

（或者这只是一个错字？）

【讨论】：

<div id="#background"></div> 应该是<div id="background"></div>
谢谢。固定的。疲惫的眼睛。 :-D

【解决方案3】：

要显示背景图像，div 必须有一定的大小/区域，你试过吗？

<body>

<div id="background" style="width: 50px; height: 60px;"></div>
<div class="container">

</div>
</body>

【讨论】：

我已经将背景 div 的宽度和高度属性设置为 100%，因此图像会填满屏幕：#background { position:fixed;左：0px；顶部：0px；背景大小：100%；宽度：100%；高度：100%； -webkit 用户选择：无； -khtml-用户选择：无； -moz 用户选择：无； -o-用户选择：无；用户选择：无； z 指数：9990； }