现在我正在构建美国地图，当您将鼠标悬停在任何给定状态上时，我将用不同颜色的图像替换图像。预加载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

相关问题