Question

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

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

我一直在大脑上喋喋不休：对于旋转功能，我已经在 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);
    }
});

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

Answer 1

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

干杯！

Answer 2

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

看到一个在两个浏览器中都运行正常的教程后，我注意到这个问题的解决方案是降级到较低版本。我正在使用1.3.2，这个问题已经解决了此（Chrome）问题似乎是版本1.6.2中的错误

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

2 个答案: