使用Jquery在悬停时切换图像 [英] toggle image on hover using Jquery

问题描述

首先，请不要建议我使用CSS执行此操作.

我需要使用Jquery在两个悬停的图像之间切换. 我需要在页面加载时下载两个图像(两个切换图像).否则会第一次造成滞后时间.因为我的图像是主页上的两个横幅，所以我需要做一些事情来创建图像对象，从而预先加载它，然后再切换对象.

I need to toggle between two images on-hover using Jquery. I need that two images (two toggling images) should be downloaded at the time of page load. Cause else it will create a lag time for the first time. As my images are two banners on the home page.I need to do something creating a image object , thus pre-loading it and later on toggling the objects.

我无法使用简单的CSS来执行此操作，因为初次出现用户时会出现滞后，因为页面加载时图像不存在.而且看起来很糟.

I cant do this using simple css cause there will be a lag for the first time user as the image is not present on page load. and it gives a bad look.

推荐答案

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

That should work, even if I'm not sure if that is what you need. You can add an onload event to both images to makes sure, they are really loaded before allowing hovering.

这篇关于使用Jquery在悬停时切换图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！