这是我遇到的问题的描述:
以下脚本将每 10 秒轮换五个背景图像；它在 IE、FF 和 Safari 中完美运行 - 但在 Chrome 中，背景图像只会旋转一次，并且不会旋转更多图像，除非我通过 F5 刷新浏览器。然后所有图像都按预期的间隔旋转，宇宙就一切正常了。
我一直在为这个问题绞尽脑汁:对于旋转功能，我在 setTimeout/setInterval 之间切换，对于图像预加载的好措施，我已经在 $(window).load(function()/$(document).ready(function() 之间进行了交换，但似乎没有任何效果 - 我总是需要刷新 Chrome 以便发生多个图像旋转。重申一下，Chrome 将在页面加载后的最初 10 秒后翻转到第一张图像，但在那之后， radio 静默- 除非刷新页面，否则不会旋转其他图像。
我使用的是 JQuery v1.6.2 和 Chrome 13.0.782.112
这是代码，我已经包含了 javascript、加载它的 HTML 以及相关的 CSS 以备不时之需。
任何见解将不胜感激!
rotateBg.js(首先创建图像路径数组，然后预加载，然后旋转)
$(window).load(function(){
var imgArr = new Array( // relative paths of images
'./images/bg_neon.jpg',
'./images/bg_trees.jpg',
'./images/bg_dancing.jpg',
'./images/bg.jpg'
);
var preloadArr = new Array();
var i;
/* preload images */
for(i=0; i < imgArr.length; i++){
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
}
var currImg = 1;
var intID = setTimeout(changeImg, 10000);
/* image rotator */
function changeImg(){
$('.bg_image').animate({opacity: 0}, 1000, function(){
$(".bg_image").attr('src',preloadArr[currImg++%preloadArr.length].src);
}).animate({opacity: 1}, 1000);
}
});
index.html
<head>
<link rel="stylesheet" media="screen" type="text/css" href="./styles/home.css">
<script type="text/javascript" src="./scripts/jquery.js"></script>
<script type="text/javascript" src="./scripts/rotateBg.js"></script>
</head>
<body>
<img class="bg_image" src="./images/bg.jpg"/>
</body>
home.css(这只是用来在给定屏幕大小调整的情况下保持背景成比例)
img.bg_image {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
z-index:-1;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg_image {
left: 50%;
margin-left: -512px; }
}
最佳答案
我在 IE8、Safari 和 Chrome 中试过你的脚本。它在任何浏览器中都不适合我。如果我添加 setTimeout(changeImg, 10000); 我可以让它工作作为 changeImg() 函数的最后一行:
function changeImg(){
$('.bg_image').animate({opacity: 0}, 500, function(){
$(".bg_image").attr('src',preloadArr[currImg++%preloadArr.length].src);
}).animate({opacity: 1}, 500);
setTimeout(changeImg, 3000);
}
干杯!
关于javascript - JQuery - Chrome 中的背景图像旋转问题(仅在 F5 刷新后有效)。在 FF、Safari、IE 中没有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7058829/