使用PreloadJS

Question

现在我正在制作一张美国地图，当你将鼠标悬停在任何特定状态时，我会用不同颜色的图像替换图像。

我的问题是我目前正在做的事情，图像正在被替换，并且在悬停时加载了新图像。

我将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中进行优化。

Answer 1

在页面加载时将图像添加到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);
 }
});

Answer 2

拥有两个图片代码并设置第一张图片的display: block。设置第二张图片的display: none。

然后在悬停时切换它们。就这么简单。

Answer 3

使用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

预加载Jquery悬停图像

3 个答案:

使用PreloadJS