更改背景並非在所有瀏覽器中都有效

Question

我有一個腳本，每隔幾秒鍾就會更改一次背景圖片。 它對我有用，但是，一些用戶報告說它不適用於Safari瀏覽器。 我使用的是Chrome，效果很好，但其中一些在Google Chrome上也有問題。 任何想法可能導致此問題？

    changeBackground();

    function changeBackground(){
        var currentBackground = $("body").css("background-image");

        setTimeout(function(){
            if(currentBackground == 'url("http://example.com/images/new-home-page/woman.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd2.png")');

            }
            else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd2.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd3.png")');

            }
            else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd3.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/woman.png")');

            }

            changeBackground();

        }, 6000);
    }

Answer 1

嘗試添加第一個默認背景圖片，可能是在野生動物園中無法獲取第一個匹配的CSS網址圖片：

changeBackground();

    function changeBackground(){
        var currentBackground = $("body").css("background-image");

        setTimeout(function(){
            if(currentBackground == 'url("http://example.com/images/new-home-page/woman.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd2.png")');

            }
            else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd2.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd3.png")');

            }
            else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd3.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/woman.png")');

            // ADD THIS ELSE
            } else {
                  // SET THE FIRST AND DEFAUT BACKGROUND
                $("body").css("background-image", 'url("/images/new-home-page/slajd2.png")')
                currentBackground = 'url("/images/new-home-page/slajd2.png")';
            }

            changeBackground();

        }, 6000);
    }

JSFiddle在Windows的Safari瀏覽器中嘗試過。

UPDATE

或者，您可以使用更安全的方法，使用計數器而不是CSS樣式，如下所示：

changeBackground();

var currentBackground = 0;

function changeBackground(){
  setTimeout(function(){
    console.log(currentBackground);
    if (currentBackground == 0){
      currentBackground = 1;
      $("body").css("background-image", 'url("https://static.pexels.com/photos/7125/water-trees-lake.jpg")');
    }
    else if(currentBackground == 1){
      currentBackground = 2;
      $("body").css("background-image", 'url("https://static.pexels.com/photos/4243/black-and-white-forest-trees-branches.jpg")');
    }
    else if(currentBackground == 2){
      currentBackground = 0;  
      $("body").css("background-image", 'url("https://static.pexels.com/photos/9159/pexels-photo.jpg")');
    } 

    changeBackground();

  }, 6000);
}

JSFiddle更新

Answer 2

我認為問題在於url標准

使用相對網址：

 changeBackground();

    function changeBackground(){
        var currentBackground = $("body").css("background-image");

        setTimeout(function(){
            if(currentBackground == 'url("/images/new-home-page/woman.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd2.png")');

            }
            else if(currentBackground == 'url("/images/new-home-page/slajd2.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/slajd3.png")');

            }
            else if(currentBackground == 'url("/images/new-home-page/slajd3.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/woman.png")');

            }

            changeBackground();

        }, 6000);
    }