How to smoothly change <img src=“…” /> with jQuery?

Question

I'm now doing something like :

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

Which is not smooth,because it takes quite some time to load an image.

Answer 1

What about pre-loading your images when the page loads:

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

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

  // ...
});

Answer 2

Change that to a background image with both the images combined and change the background position dynamically.

Use CSS sprites .

If you need to stick with an image itself then preload the two images and then it will take the second image from the cache which won't cause the delay.

Preloading Images With CSS

Answer 3

试试这个：完成后加载图像和交换或页面加载时预加载图像 。

Answer 4

perload the image and put it in div that have a opacity: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>');