如何使用jQuery顺利更改<img src="..."/>？

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 sprites。

如果你需要坚持使用图像本身然后预加载两个图像，然后它将从缓存中获取第二个图像，这不会导致延迟。

Preloading Images With CSS

Answer 3

试试这个：Load image and swap when done或Preload image when page load。

Answer 4

对图像进行perload并将其放在具有不透明度的div中：0; height：0; width：0;

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