使用 Jquery 在悬停时切换图像答案

【问题标题】：toggle image on hover using Jquery使用 Jquery 在悬停时切换图像
【发布时间】：2010-08-24 13:23:19
【问题描述】：

首先请不要建议我使用 css。

我需要使用 Jquery 在两个悬停图像之间切换。我需要在页面加载时下载两个图像（两个切换图像）。因为否则它会第一次产生滞后时间。因为我的图片是主页上的两个横幅。我需要做一些事情来创建一个图片对象，从而预加载它，然后再切换对象。

我无法使用简单的 css 执行此操作，因为第一次使用的用户会出现延迟，因为图像在页面加载时不存在。而且看起来很糟糕。

【问题讨论】：

我发现这个问题正在寻找其他东西，但您可以使用 CSS 来切换这些图像，并在标记中将页面上的图像设置为无。这将在没有 javascript 的情况下完成整个过程。
@AndrewJackman 请再次阅读问题，我明确指出：我不能使用简单的 css 执行此操作，因为用户第一次会出现延迟，因为图像在页面加载时不存在。它看起来很糟糕。
是的，我完全理解您的推理，但是有一种方法可以在页面加载时加载图像。如果您在正文标签的底部有<img src='image.jpg' style='display:none; position: absolute; bottom: 0; left: 0; height: 1px; width: 1px;' />。然后，如果您稍后通过悬停效果使用image.jpg，则不会有延迟，因为浏览器已经下载了图像。

【解决方案1】：

$(function(){
   var imgs = [
       new Image(),
       new Image()
   ];

   imgs[0].src = 'http://www.typeofnan.com/pic1.jpg';
   imgs[1].src = 'http://www.typeofnan.com/pic2.jpg';

   $('#hoverelement').hover(function(){
      $(this).html(imgs[0]);
   }, function(){
      $(this).html(imgs[1]);
   });
});

这应该可以，即使我不确定这是否是您需要的。您可以向两个图像添加onload 事件，以确保它们在允许悬停之前真正加载。

【讨论】：

【解决方案2】：

以下代码的快速演示：http://jsbin.com/itunu

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Hello world !!</title>

</head>
<body>
  <img  />
</body>
</html>

Javascript：

var a = [];

a[0] = "http://i577.photobucket.com/albums/ss219/music_munster/powerpuff-girls-092.jpg";
a[1] = "http://img.listal.com/image/459059/500full.jpg";


$(document).ready(function() {
  var source = $.preload(a); 
  $('img').attr('src',source[0].src); //just an acknowledgement (pre-loading done)
  $('img').hover(function() {
    $('img').attr('src',source[1].src);
  },function() {
    $('img').attr('src',source[0].src);    
  });

});



//Image Preloading....  
var cache = [];
  $.preload = function(arr) {
    for(var i = 0; i<arr.length; i++) {
      var img = new Image();
      img.src = arr[i];
      cache.push(img);
    }
    return cache;
  };

【讨论】：