使用jquery悬停切换图像

首先请不要建议我使用css来做到这一点。使用jquery悬停切换图像

我需要使用Jquery在悬停的两个图像之间切换。我需要在页面加载时下载两个图像（两个切换图像）。原因其他它会创造一个第一次滞后时间。因为我的图像是在主页上的两个横幅。我需要做一些创建图像对象，从而预先加载它，然后切换对象。

我不能这样做使用简单的CSS因为会有一个滞后的第一次用户，因为该图像不存在页面加载。它看起来很糟糕。

2010-08-24 Mohit Jain

我发现这个问题寻找其他的东西，但你可以使用CSS来切换这些图像，并在您的网页上的图片标签，显示设置为无。这将完成没有JavaScript的整个过程。 – 2011-11-23 14:57:19

@AndrewJackman请再次阅读这个问题，我明确指出：我不能使用简单的CSS来做这件事因为第一次为用户会有一个滞后，因为图像不是在页面加载时出现。它看起来很糟糕。 – 2011-11-23 17:13:24

是的，我完全理解你的推理，但是有一种方法可以在加载页面时加载图像。如果您在身体标签底部有''。然后，如果稍后通过悬停效果使用'image.jpg'，则不会出现延迟，因为浏览器已经下载了图像。 – 2011-11-24 07:13:14

$(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事件，以确保它们在允许悬停前真正加载。

来源

2010-08-24 13:41:33 jAndy

这里是下面的代码的快速演示：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; 
    };

来源

2010-08-24 13:40:55

使用jquery悬停切换图像

回答

相关问题