用預加載在懸停時交換圖像

Question

我有一個徽標列表，希望通過懸停效果進行增強。 （彩色徽標<->黑白徽標）

我有以下標記：

  var sourceToggle = function () { var $this = $(this); var newSource = $this.data('hover'); $this.data('hover', $this.attr('src')); $this.attr('src', newSource); } $(function() { $('img[data-hover]').each(function() { new Image().src = $(this).data('hover'); }).hover(sourceToggle, sourceToggle); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="url"> <img src="http://lorempixel.com/200/200/sports/1/" data-hover="http://lorempixel.com/g/200/200/sports/1/"> </a> 

到目前為止，這段代碼可以正常工作，但是我想知道它是否是好的代碼，或者我是否可以使其更短。

我也想知道是否可以預加載懸停圖像，因為有時加載速度不夠快，並且出現閃爍。

Answer 1

我將刪除“懸停” Javascript部分，然后讓CSS來完成其工作。 運行JS只是為了准備該字段，然后讓瀏覽器放松。

這是一個示例代碼（也是Fiddle ）：

  $(function () { $('img[data-hover]').each(function () { var thisImage = $(this); var hoverSrc = thisImage.data('hover'); var hoverImage = $('<img class="bw_image" src="' + hoverSrc + '" />'); thisImage.after(hoverImage); }) }); 

 .hovering { display: inline-block; position: relative; } .hovering img { display: block; } .bw_image { position: absolute; left: 0; top: 0; opacity: .01; transition: opacity ease-in-out .2s; } .bw_image:hover { opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a class="hovering" href="url"> <img src="http://lorempixel.com/200/200/sports/1/" data-hover="http://lorempixel.com/g/200/200/sports/1/" /> </a> <a class="hovering" href="url"> <img src="http://lorempixel.com/200/200/sports/2/" data-hover="http://lorempixel.com/g/200/200/sports/2/" /> </a> <a class="hovering" href="url"> <img src="http://lorempixel.com/200/200/sports/3/" data-hover="http://lorempixel.com/g/200/200/sports/3/" /> </a> 

Answer 2

如果可以，我將用純CSS懸停效果和背景圖片替換整個內容。

如果您使用它制作一個子畫面，則可以“預加載”您的懸浮圖像（懸浮時會輕推一個圖像），例如：

 a { display: block; background: url('http://i61.tinypic.com/2cxbyaq.png') no-repeat; width: 200px; height: 200px; } a:hover { background-position: -200px 0; } 

 <a href="url"></a>