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

Question

这是我遇到的问题的描述：

以下脚本将每 10 秒旋转 5 个背景图像； 它在 IE、FF 和 Safari 中完美运行 - 但在 Chrome 中，背景图像只会旋转一次，并且不会旋转更多图像，除非我通过 F5 刷新浏览器。 然后所有图像都按预期间隔旋转，宇宙一切正常。

我一直在为此绞尽脑汁：对于旋转 function，我在setTimeout / setInterval之间切换，而对于图像预加载好的措施，我在$(window).load(function() / $ (document).ready(function() ，但似乎没有任何效果 - 我总是必须刷新 Chrome 才能发生多个图像旋转。重申一下，Chrome将在最初的 10 之后翻转到第一张图像页面加载后的秒数，但在那之后，无线电静默 - 除非刷新页面，否则不会旋转其他图像。

我正在使用 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);
    }
});

索引.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; }
}

Answer 1

我在 IE8、Safari 和 Chrome 中尝试了你的脚本。 它在任何浏览器中都不适用于我。 如果我添加 setTimeout(changeImg, 10000); ，我可以让它工作。 作为 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);
}

干杯!

Answer 2

我有同样的问题。 我尝试了 Jean-François Beauchamp 给出的解决方案。 结果是，chrome 工作正常，但 IE9 现在出现问题，一段时间后没有显示背景图像。

在看到一个在两个浏览器中都运行良好的教程后，我注意到这个问题的解决方案是降级到较低版本。 我使用的是 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