How to smoothly change <img src="..." /> with jQuery?

image, javascript, jquery

Solution

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

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

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

  // ...
});

Problem

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.

Original source