如何順利改變 <img src=“…” /> 用jQuery？

Question

我現在正在做類似的事情：

$img.hover(function(){$(this).attr('src','1.jpg')},function(){$(this).attr('src','2.jpg')});

哪個不順暢，因為加載圖像需要相當長的時間。

Answer 1

如何在頁面加載時預加載圖像：

$(function () {
  var preloadImages = ['1.jpg', '2.jpg'];

  $.each(preloadImages, function () {
    $('<img/>').attr('src', this);
  });

  // ...
});

Answer 2

將兩個圖像組合在一起，將其更改為背景圖像，並動態更改背景位置。

使用CSS精靈 。

如果你需要堅持使用圖像本身然后預加載兩個圖像然后它將從緩存中獲取第二個圖像，這不會導致延遲。

使用CSS預加載圖像

Answer 3

試試這個：完成后加載圖像和交換或頁面加載時預加載圖像 。

Answer 4

perload圖像並將其放在具有不透明度的div中：0;高度：0;寬度：0;

preload_url = $(this).data('hover_image');
$('body').append('<div style="opacity:0;height:0;width:0"><img src="'+preload_url+'"></div>');