如何用JavaScript正確切換圖像？

我在頁面上有一些複雜的div結構，我想切換一些圖片（懸停），但我不能直接設置懸停與CSS，因爲我想懸停在另一個透明圖像後面的圖像懸停。因此我在頂部創建了透明疊加層。當疊加層懸停時，指定div的背景被切換。如何用JavaScript正確切換圖像？

HTML：

<div id="image"></div> 
<div id="overlay"></div>

CSS：

#image { 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    background: url(myImage.jpg); 
} 

#overlay { 
    position: absolute; 
    width: 300px; 
    height: 300px; 
}

，這裏是jQuery的做切換：

$(function() { 
    $("#overlay").hover(function() { 
      $("#image").css({ 
       "background": "url(myNewImage.jpg)" 
      }); 
    }, function() { 
      $("#image").css({ 
       "background": "url(myImage.jpg)" 
      }); 
    }); 
});

它切換圖像沒有問題。問題是，在圖像切換一段時間後（小於秒），您可以看到空白背景（當#image div沒有填充任何圖像時）會有小的延遲。

另一方面，當你使用普通的CSS而沒有jQuery來切換像這樣的圖像（在這種情況下不可能），那麼就沒有這種延遲。

所以，使用jQuery，你會如何防止發生這種延遲？或者有更好的方法來解決這個問題嗎？

來源

2014-04-01 Matúš Dúbrava

您的問題是您通過jQuery加載的圖像未預加載。當您切換圖像時，圖像需要一秒才能下載。當您在CSS中有圖片網址時，所有這些圖片都會與樣式表一起下載。解決您的問題是預加載您的圖像。

來源

2014-04-01 03:25:49

這就是我的想法，但不確定。謝謝。 –

@MatúšDúbrava我建議執行預加載是在腳本之前在隱藏div' display：none'中獲取這些圖像。這將確保在從服務器完全下載圖像之前腳本不會準備好。 – SaidbakR

我不是100％肯定，因爲我不知道完整的情況，但來自什麼樣的信息您提供，應該可以用純CSS以及：

#overlay:hover #image { 
    background: url(anotherImage.jpg); 
}

關於在顯示畫面的延遲，你可以使用一個精靈。將兩張照片放在一個文件中（例如在彼此的上方），並在懸停時更改背景圖像的位置。

來源

2014-04-01 03:24:48 Robin

可惜的是，我已經聲明這是不可能的。對於CSS來說，DOM結構太複雜了。 –

你確定嗎？因爲CSS只是在做你的JS正在做的事情。當#overlay Div懸停時，#image將更改背景圖像。如果這個ID是獨一無二的，那就應該很好。 – Robin

你不能像這樣使用CSS選擇器，它不起作用。 –

你需要的是設置多個背景圖片，所以這兩個圖片都是加載。懸停時爲，開關background-position。

事情與此類似：

$(function() { 
    $("#overlay").hover(function() { 
      $("#image").css({ 
       "background": "url(myNewImage.jpg) top left, url(myImage.jpg) 9999px 9999px" 
      }); 
    }, function() { 
      $("#image").css({ 
       "background": "url(myNewImage.jpg) 9999px 9999px, url(myImage.jpg) top left" 
      }); 
    }); 
});

#image { 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    background:url(myNewImage.jpg) 9999px 9999px, url(myImage.jpg) top left; 
}

來源

2014-04-01 03:27:59

如何用JavaScript正確切換圖像？

回答

相關問題