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

Question

Now I am doing something like:

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

Which is not smooth, because loading an image takes quite a while.

Answer 1

How about preloading your images when loading a page:

 $(function () { var preloadImages = ['1.jpg', '2.jpg']; $.each(preloadImages, function () { $('<img/>').attr('src', this); }); // ... }); 

Answer 2

Change this to a background image with merged images and dynamically change the position of the background.

Use CSS sprites .

If you need to adhere to the image itself, first preload two images, and then select the second image from the cache, which will not cause a delay.

CSS image preload

Answer 3

Try the following: Download the image and swap it when you 're done or Preload the image when the page loads .

Answer 4

load the image and place it in a div with 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>');