JQuery - Chrome 中的背景图像旋转问题（仅在 F5 刷新后有效）。在 FF、Safari、IE 中没有问题

Question

here's a description of the issue I'm having:这是我遇到的问题的描述：

The following script will rotate through five background image every 10 seconds;以下脚本将每 10 秒旋转 5 个背景图像； it works perfectly in IE, FF, and Safari - but in Chrome, the background image will only rotate once , and no further images are rotated, unless I refresh the browser via F5.它在 IE、FF 和 Safari 中完美运行 - 但在 Chrome 中，背景图像只会旋转一次，并且不会旋转更多图像，除非我通过 F5 刷新浏览器。 Then all images are rotated on the expected interval, and all is right with the universe.然后所有图像都按预期间隔旋转，宇宙一切正常。

I've been pounding my brain on this one: for the rotation function, I've switched between setTimeout / setInterval , and for image-preloading good measure, I've swapped between $(window).load(function() / $(document).ready(function() , but nothing seems to do the trick - I always have to refresh Chrome in order for more than one image rotation to occur. Just to reiterate, Chrome will flip to the first image after the initial 10 seconds once the page loads, but after that, radio silence - no other images are rotated, unless the page is refreshed.我一直在为此绞尽脑汁：对于旋转 function，我在setTimeout / setInterval之间切换，而对于图像预加载好的措施，我在$(window).load(function() / $ (document).ready(function() ，但似乎没有任何效果 - 我总是必须刷新 Chrome 才能发生多个图像旋转。重申一下，Chrome将在最初的 10 之后翻转到第一张图像页面加载后的秒数，但在那之后，无线电静默 - 除非刷新页面，否则不会旋转其他图像。

I'm using JQuery v1.6.2, and Chrome 13.0.782.112我正在使用 JQuery v1.6.2 和 Chrome 13.0.782.112

Here's the code, I've included the javascript, the HTML to load it, and the associated CSS for good measure.这是代码，我已经包含了 javascript、HTML 来加载它，以及相关的 CSS 以进行良好的测量。

Any insight would be greatly appreciated!任何见解将不胜感激！

rotateBg.js (first create an array of the images paths, then preload, then rotate) 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索引.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 (this is just used to keep the background proportional given screen resizing) 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; }
}

Answer 1

I tried your script in IE8, Safari and Chrome.我在 IE8、Safari 和 Chrome 中尝试了你的脚本。 It does not work for me in any browser.它在任何浏览器中都不适用于我。 I can make it work though if I add setTimeout(changeImg, 10000);如果我添加 setTimeout(changeImg, 10000); ，我可以让它工作。 as the last line of the changeImg() function:作为 changeImg() function 的最后一行：

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

Cheers!干杯!

Answer 2

I've had the same problem.我有同样的问题。 I tried the solution given by Jean-François Beauchamp.我尝试了 Jean-François Beauchamp 给出的解决方案。 The result was, that chrome was working fine, but IE9 had problems now, in showing no background images after a while.结果是，chrome 工作正常，但 IE9 现在出现问题，一段时间后没有显示背景图像。

After seeing a tutorial, which was working fine in both browsers, I noticed that the solution for this problem was downgrading to a lower version.在看到一个在两个浏览器中都运行良好的教程后，我注意到这个问题的解决方案是降级到较低版本。 I'm using 1.3.2 and this problem had been solved This (Chrome) problem seems to be a bug in version 1.6.2我使用的是 1.3.2，这个问题已经解决了这个（Chrome）问题似乎是 1.6.2 版本中的一个错误

JQuery - Chrome 中的背景图像旋转问题（仅在 F5 刷新后有效）。在 FF、Safari、IE 中没有问题

问题描述

2 个解决方案

解决方案1
2 已采纳 2011-08-14 19:08:34

解决方案2
1 2012-01-10 07:20:11

JQuery - Chrome 中的背景图像旋转问题（仅在 F5 刷新后有效）。 在 FF、Safari、IE 中没有问题

问题描述

2 个解决方案

解决方案1 2 已采纳 2011-08-14 19:08:34

解决方案2 1 2012-01-10 07:20:11

JQuery - Chrome 中的背景图像旋转问题（仅在 F5 刷新后有效）。在 FF、Safari、IE 中没有问题

解决方案1
2 已采纳 2011-08-14 19:08:34

解决方案2
1 2012-01-10 07:20:11