jquery - 使用 Jquery 悬停时切换图像

Question

首先，请不要建议我使用 css 来执行此操作。

我需要使用 Jquery 在两个悬停图像之间切换。我需要在页面加载时下载两个图像(两个切换图像)。否则第一次会产生延迟时间。由于我的图像是主页上的两个横幅。我需要执行一些操作来创建图像对象，从而预加载它，然后切换对象。

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

Answer 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 事件，以确保它们在允许悬停之前确实已加载。