переключить изображение при наведении курсора с помощью Jquery - PullRequest
Новая
       21

переключить изображение при наведении курсора с помощью Jquery

1 голос
/ 24 августа 2010

Прежде всего, пожалуйста, не предлагайте мне сделать это с помощью css.

Мне нужно переключаться между двумя изображениями при наведении курсора, используя Jquery.Мне нужно, чтобы два изображения (два переключаемых изображения) были загружены во время загрузки страницы.Потому что иначе это создаст время задержки в первый раз.Поскольку мои изображения - это два баннера на домашней странице. Мне нужно что-то сделать, создав объект изображения, предварительно загрузив его, а затем переключив объекты.

Я не могу сделать это с помощью простого CSS, посколькуЗадержка для первого пользователя, поскольку изображение отсутствует при загрузке страницы.и это плохо смотрится.

Ответы [ 2 ]

4 голосов
/ 24 августа 2010 
$(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 к обоим изображениям, чтобы убедиться, что они действительно загружены перед разрешением зависания.

1 голос
/ 24 августа 2010

Ниже приведена краткая демонстрация кода: 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;
  };
...