jQueryの - 画像の代替遷移[Safariで問題]

Question

わかりました私は、次のコードを持っている： -

[SEE JSFIDDLE]

HTML：

<div id="header"> 
    <span class="mobile-menu"></span> 
</div> 

CSS：

#header { 
    width: 100%; 
    background: #000000; 
    height: 100px; 
} 

.mobile-menu { 
    position: absolute; 
    right: 25px; 
    top: 20px; 
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-01.png); 
    background-repeat: no-repeat; 
    background-size: 26px !important; 
    height: 26px; 
    width: 26px; 
    display: inline-block; 
    margin: 7px 0; 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    -o-transition-duration: 0.8s; 
    transition-duration: 0.8s; 
} 

.mobile-menu-hover { 
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/mobile-menu-hover.png); 
} 

jQueryの：

var imagesArray = ["http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-01.png", 
        "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-02.png", 
        "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-03.png", 
        "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-04.png", 
        "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-05.png", 
        "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-06.png", 
        "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-07.png"]; 

function preloadImg(pictureUrls, callback) { 
    var i, j, loaded = 0; 
    var imagesArray = []; 

    for (i = 0, j = pictureUrls.length; i < j; i++) { 
    imagesArray.push(new Image()); 
    } 
    for (i = 0, j = pictureUrls.length; i < j; i++) { 
    (function (img, src) { 
     img.onload = function() { 
     if (++loaded == pictureUrls.length && callback) { 
      callback(imagesArray); 
     } 
     }; 
     img.src = src; 
    }(imagesArray[i], pictureUrls[i])); 
    } 
}; 


function changeImage(background, imagesArray, index, reverse) { 
    background.css("background-image", "url('" + imagesArray[index].src + "')").fadeIn(10, function() { 
    if (reverse) { 
     index--; 
     if (index == -1) { 
     return; // stop the interval 
     } 
    } else { 
     index++; 
     if (index == imagesArray.length) { 
     return; // stop the interval 
     } 
    } 
    //Fade in the top element 
    background.fadeOut(10, function() { 
     //Set the background of the top element to the new background 
     background.css("background-image", "url('" + imagesArray[index] + "')"); 
     changeImage(background, imagesArray, index, reverse); 
    }); 
    }); 
} 



jQuery(function() { 
    /* Preload Image */ 
    preloadImg(imagesArray, function (imagesArray) { 
    jQuery(".mobile-menu").css("background-image", "url('" + imagesArray[0].src + "')") 
    jQuery('.mobile-menu').on('click', {imgs: imagesArray}, function (event) { 
     var background = jQuery(".mobile-menu"); 
     var bi = background.css('background-image'); 
     var index = 0; 
     var reverse = false; 
     if (imagesArray[0].src != bi.replace('url("', '').replace('")', '')) { 
     index = imagesArray.length - 1; 
     reverse = true; 
     } 
     changeImage(background, event.data.imgs, index, reverse); 
    }); 
    }); 
}); 

問題：

これは、2番目のクリックで逆転を行い、それをクリック上の7つの異なる画像間の遷移、FirefoxとChromeで正常に動作します（トグル） 。

問題は私がSafariでこれを試してみると、基本的にはイメージ置換プロセスを経て、何らかの理由で最初のイメージに戻ってしまい、なぜわかりませんか？

アイデア？

Answer 1

Safariは、二重引用符なし背景画像を返しますが、それは本当取得することはありません置き換えると逆転しないように、あなたの、（URLに対する"を機能チェックを置き換えるためと考えられる。

代わりにあなたの交換ののindexOfや正規表現を使ってマッチングのいずれかを使用してチェックすることができ、それは安全でより簡単になり次のいずれか。

if (bi.indexOf(imagesArray[0].src) == -1) { 

または

indexOf付き

if (imagesArray[0].src != bi.match(/http.+png/)[0]) { 

：http://jsfiddle.net/u9ske14r/