當我使用background-image css屬性時在閃爍的圖像

Question

我的網頁有兩個div，這是用戶可以選擇的兩種可能的選項。我用CSS（背景圖像）設置每個div背景。當網站加載時，圖像被預加載。有兩種可能的狀態，當選擇選項xxx_image_enabled.png被設置爲背景圖像時，當未選擇該選項時，將xxx_image_disabled.png設置爲背景圖像。在某些瀏覽器（Chrome）中，它閃爍一點。我用jQuery設置了background-image屬性。

的CSS是這樣的：

.option-div{ 
    width: 70px; 
    height: 70px; 
    background-position: center; 
    background-size: contain; 
    background-repeat: no-repeat; 
    margin: 0 auto; 
} 

任何想法是什麼原因造成的閃爍？刷新後消失。

Answer 1

這很可能是jQuery導致事件重複。爲了解決這個問題，我建議在函數中使用jQuery .stop。

考慮：

$("#option-div").stop(true,false).animate({ //this is assuming you are using animate, swap this out for the event you are using 

//只是爲了讓你知道，如果設置爲false，假將跳過事件，直接進入最終的結果，在這種情況下，動畫不會觸發。

此外，請考慮使用if語句來防止事件被調用（如果它已處於活動狀態）。

考慮：

if($("#option-div").not(':animated')){ 
else { // your code here 

這將是比較容易理解的問題，並幫助你，如果你提供你的jQuery代碼，我會評論，但沒有50代表呢。

Answer 2

儘量避免在腳本中設置原始樣式以保持代碼的不顯眼和分離。您可以在CSS中設置背景圖像，然後在jQuery中更改它的值。

不確定您的HTML設置如何，但請確保您的CSS在HTML順序中的腳本之前加載。如果您的腳本先加載，則會出現一些渲染問題。將<link>或<style>放在使用它的<script>之前。

我只是猜測這些建議，因爲我看不到jQuery代碼。