刷新时随机背景图像
Posted
技术标签:
【中文标题】刷新时随机背景图像【英文标题】：Random background image on refresh 【发布时间】：2013-10-22 13:28:00 【问题描述】：我试图在每次用户访问该网站时随机加载一张图片。我已经关注了一个教程和几个关于这个问题的先前线程，但似乎无法让它工作。图像位于 /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>
我哪里错了？
【问题讨论】：
【参考方案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；以上是关于刷新时随机背景图像的主要内容，如果未能解决你的问题，请参考以下文章