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);
  });

  // ...
});