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