現在我正在構建美國地圖，當您將鼠標懸停在任何給定狀態上時，我將用不同顏色的圖像替換圖像。預加載Jquery懸停圖像

我的問題是，我目前正在做的事情，圖像正在被替換，並加載一個新的圖像懸停。

我已在HTML佈局爲
<img class="state" id="alaska" src="img/united-states_Alaska.png" alt="alaska"> <img class="state" id="hawaii" src="img/united-states_hawaii.png" alt="hawaii">

，我使用了jQuery是

$('.interactive-map img').each(function(e){ 
    var src = $(this).attr('src'); 
    $(this).hover(function(){ 
     $(this).attr('src', src.replace('.png', '-hover.png')); 
    }, function(){ 
     $(this).attr('src', src); 
    }); 
});

我很好奇，如果有另一種方式要麼預加載JavaScript中的圖像，或者使其每次旋轉時都不會有新的圖像請求。我想不必更改HTML或CSS，並在Javascript中進行優化。

來源

2014-02-11 user2928768

你看一些這些問題：http：// stackoverfl ow.com/search?q=javascript+preload+images？ – surfmuggle

添加您的圖像在網頁加載的DOM，但隱藏的狀態，那麼他們得到緩存

$(function() { 
var images = ['url/to/your/jpg1.jpg', 'ur/to/your/png2.png']; 
var d = document.createElement("div"); 
d.style.display = 'none'; 
document.body.appendChild(d); 
for (var i in images) 
{ 
    var img = document.createElement("img"); 
    img.src = images[i]; 
    d.appendChild(img); 
} 
});

來源

2014-02-11 21:11:35 zagros

有兩個圖像標記，並設置第一個圖像的display: block。設置第二張圖片的display: none。

然後在懸停時切換它們。就是這麼簡單。

來源

2014-02-11 21:11:53 les

使用PreloadJS

例子：

var preload = new createjs.LoadQueue(); 
preload.addEventListener("fileload", handleFileComplete); 
preload.loadFile('http://createjs.com/images/404/gBot-confused.jpg'); 
function handleFileComplete(event) { 
    document.body.appendChild(event.result); 
}

全部文檔：here

另一個有趣的帖子使用JS和AJAX：Preloading

來源

2014-05-19 13:11:29 softvar

預加載Jquery懸停圖像

回答

使用PreloadJS

相關問題