動態設置Chrome中不顯示的背景圖片

我遇到了一個問題，Chrome中沒有顯示div的背景圖片。動態設置Chrome中不顯示的背景圖片

我正在處理的一個網站有兩個圖像容器坐在另一個圖像容器上：z-index較低的圖像顯示當前選擇的圖像，而z-index較高的圖像容器用於預覽其他圖像用戶懸停在導航中的項目上。

基本上，應該發生的事情是，每次將鼠標光標從一個導航項移動到下一個導航項時，舊的預覽圖像將保存爲預覽圖像容器的背景，然後保存爲預覽中的實際圖像容器被隱藏（沒有被注意到，因爲圖像仍然在背景中），換成新圖像然後淡入。淡出應該直接從舊圖像發生，這就是爲什麼我設置舊的圖像作爲背景之前。

現在，這個功能無處不在，但在谷歌瀏覽器中，背景圖片不會顯示。奇怪的是，我使用了一個調試中斷仔細觀察並注意到背景圖像實際上是正確設置的（意味着它在當時的CSS元素中正確列出），但它並未顯示在瀏覽器。

var previewDelay; 
$("#cnt-navigation_secondary").find(".txt-navigation_secondary").mouseenter(function(){ 
    var newImage = $(this).find("img").attr("src"); 
    var oldImage = $("#img-content-preview").attr("src"); 
    previewDelay = setTimeout(function(){ 
     $("#cnt-content-preview").show(); //The previewing container is shown (in case it was hidden before). 
     $("#cnt-content-preview").css({"background-image":"url("+oldImage+")"}); //The old image is set as the background of the previewing container 
     $("#img-content-preview").hide(); //The image inside the previewing container is hidden. All browsers but Chrome now show still show the same image, as it is in the background, but Chrome doesn't, even though it's visible in the CSS. 
     $("#img-content-preview").attr("src", newImage); //The source of the hidden image is set to the new image. 
     $("#img-content-preview").fadeIn(400); //The new image is faded in.   
    },100); 
}).mouseleave(function(){ 
    clearTimeout(previewDelay); 
});

你可以看到這裏的行動了整個事情：http://www.haasarchitektur.at/index.php?main=1&siteid=403 嘗試懸停在架構subnav項目。例如，在Firefox中，預覽圖像會從一個項目流暢地變爲另一個項目，而在Chrome中，由於預覽容器的背景設置不正確，您總是會短暫看到後面的元素閃爍。

我有點不知所措，因此任何幫助將不勝感激。 ; ）

謝謝&最好的問候，邁克爾

來源

2013-04-07 Njord

它似乎爲我工作？儘管我認爲有更好的方法可以通過css3過渡來實現這種效果？ – 2013-04-07 18:30:49

它呢？當您從一個項目懸停到下一個項目時，您看不到當前選定的項目之間短暫顯示？至於CCS3的轉換：是的，但我擔心IE兼容性。也許我會在兼容的瀏覽器中使用轉換，只有在沒有解決這個問題的情況下。感謝您的反饋。 ; ） – Njord 2013-04-07 18:52:26

居然沒有它不是... jQuery似乎沒有正確顯示cnt-content-preview – 2013-04-07 20:29:14

背景圖像似乎並沒有加載，因爲這是一個相當大的文件？我試着將你的例子設置爲紅色而不是改變圖像的背景顏色，並且工作正常，並阻止顯示原始圖像。您可能需要制定一種方法來將背景圖像放置在div中，以便它已經加載到瀏覽器中。

由於您已經將圖像加載到導航菜單中，您可以使用CSS讓jquery覆蓋這個圖像，直到真實圖像準備好了？

來源

2013-04-08 08:11:14

動態設置Chrome中不顯示的背景圖片

回答

相關問題