Javascript 如何为悬停状态预加载图像以立即而不是几秒钟后更改背景

如何为悬停状态预加载图像以使背景立即改变，而不是几秒钟后。即，在用户悬停在特定元素上之前必须加载背景

该网站可在以下网址查看：

到目前为止，我对编码非常满意，我想知道是否有一个相对简单的更改来实现这一点。非常感谢

<!-- background change -->
 <script type="text/javascript">
      $(document).ready(function() {
        $('#hoverarea').hover(function() {
            $('body').addClass('hover');
        }, function(){
            $('body').removeClass('hover');
        });
      });
    </script>

        <!-- background change-->


    <div id="hoverarea"><a href="comingsoon.html"> <img src="images/blank.png" onmouseover="playSound('audio/apple2.mp3');"> </a></div>

body {
    background-image:url('../images/blackandwhite.gif');
    background-position:50% 20px; 
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-color:black;
    height:714px;
    width:1024;
}

#hoverarea {
    position:absolute;
    width:400px;
    height:400px;
    top:300px;
    right:20px;
    z-index:2000; 
}



.hover {
    background-image:url('../images/colour.gif');

}


li a:hover + img {
    left: 0px;
}

$（文档）.ready（函数（）{
$（'#hoverarea'）。悬停（函数（）{
$（'body'）.addClass（'hover'）；
}，函数（）{
$（'body'）.removeClass（'hover'）；
});
});
身体{
背景图像：url（'../images/blackandwhite.gif'）；
背景位置：50%20px；
背景附件：固定；
背景重复：无重复；
背景色：黑色；
高度：714px；
宽度：1024；
}
#悬停区{
位置：绝对位置；
宽度：400px；
高度：400px；
顶部：300px；
右：20px；
z指数：2000；
}
.悬停{
背景图像：url（'../images/color.gif'）；
}
li a:悬停+img{
左：0px；
}

我相信您指的是大背景图像。问题是，由于页面上的元素太少，用户可能会在预加载第二个元素之前将鼠标悬停在图像上。毕竟，这是一个很大的形象

你可以试试CSS精灵。这里的概念是将两个图像合并为一个高图像，以便将所有图像作为一个图像加载。然后，在css中，您可以执行以下操作：

#hoverarea {
  background-image: url('../images/backgroundimage.gif');
  background-position: center top;
}

#hoverarea:hover {
  background-position: center bottom;
}

---

通过这种方式，您所做的只是更改一个图像的css位置，而不是使用繁重的javascript解决方案来预加载和注入第二个图像。

您可以在javascript中等待此图像-在我的网站上，我使用“缓存列表”在显示网站之前预加载包含图片URL的图片-如果您想在js中创建新的话图像元素，并给它这个图片的src，当onload事件将激发-浏览器将缓存这个图像，所以当它出现在任何其他地方时，它将立即显示。下面是我网站上的代码，但我想它的工作原理很清楚：

function cache(input, prefix, primary, cback){
  this.cback = cback
  this.tab=[];
  var tmp = input;
  var cur;
  for (var i = 0; i < tmp.length; i++)
  {
    if (tmp[i][0] == primary)
      cur = i;
  }
  if (cur != undefined)
  {
    this.size = tmp[cur][1].length;
    if (this.size == 0)
      this.cback();
    for (var i = 0; i < this.size; i++)
    {
      var img = document.createElement('img');
      img.src = prefix+tmp[cur][1][i];
      img.onload = this.imgReady.bind(this);
      img.onerror = this.imgError.bind(this);
      this.tab.push(img);
      console.log('caching:', img.src);
    }
    tmp.splice(cur, 1);
    return;
  }
  this.cback();
}

cache.prototype = {
  counter:0,
  size:0,
  tab:0,
  cback:function(){return;},
  imgReady:function(element){
    this.counter++;
    if (this.counter == this.size){
      storeCache(this.tab)
      this.cback(this.tab);
    }},
  imgError:function(){
    DEBUG.innerHTML+='[ERROR] cache error!<br>';
    console.log('cache error...');
    this.imgReady();}
}

实际上，我对所有子网站使用一个缓存文件，这就是为什么缓存列表中有“main”或“theme_selector”标识符（它们作为前缀参数传递）

---

所以，一般的想法是为每个重要的图片创建图像元素，并在所有图片都触发onload事件（或onerror）后继续操作，因为这样它们就会被浏览器缓存并立即显示在我们想要的任何地方

不过，动画gif精灵可能吗？请参阅网站链接可能是这样，但动画gif在90年代已经过时，所以我不确定？动画gif精灵是可能的，尽管这需要大量的工作，并且会导致web图像的文件非常大。我会再看一次你的链接。好的，我看了这个链接，我知道你想要什么。看起来你正试图创建一个没有flash的类似flash的网站。不过，由于gif没有响应能力，您并没有真正获得放弃flash的任何好处。您遇到的问题是，您试图在用户与页面交互之前预加载两个非常大的图像，这只是一个基本问题。我不确定你是如何在一个像你建立的那样的网站上度过难关的。gif是没有响应的，但如果大家都忘记Adobe不再支持手机Flash，它可以在手机上工作。我可能会使用canvas，但我的方法仍然有效，因为canvas只能显示加载的图像，因为你击中了头部的钉子；一个没有flash的flash站点！好东西！我会先试用第一代gents soloution，这对我的非网络用户来说似乎更容易，但非常感谢！如果您想完全使用我的代码，请将所有图像放在一个类别中，例如“mane”，并传递：作为此缓存数组的第一个参数，作为第二个根路径（例如，在我的示例中为“http://localhost/style/pictures”），作为第三个类别名称，如果您想使用此类别系统，则传递“mane”或其他内容，并将回调函数作为最后一个参数

[
  [
    'main',
    [
      '/pictures/party.png',
      '/pictures/icon.png',
      '/pictures/+1.png',
      '/pictures/splash.jpeg',
      '/pictures/logo_compact.png',
      '/pictures/dj.png',
      '/pictures/sign.png',
      '/textures/main.jpg',
      '/textures/shadow.png',
      '/textures/smallshadow.png',
      '/textures/outlineH.png',
      '/textures/outlineV.png',
      '/textures/bg.jpg',
      '/textures/alt.jpg'
    ]
  ],
  [
    'theme_selector',
    [
      '/../uni/p1.png',
      '/../uni/p1a.png',
      '/../uni/p2.png',
      '/../uni/p2a.png',
      '/../uni/p3.png',
      '/../uni/p3a.png',
    ]
  ],
  ...
]