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

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 2

Try this: Load image and swap when done or Preload image when page load.

Answer 3

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

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

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

  // ...
});