Как плавно изменить <img src = "..." /> с помощью jQuery?

Question

Я сейчас делаю что-то вроде:

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

Что не совсем гладко, потому что загрузка изображения занимает некоторое время.

Answer 1

Как насчет предварительной загрузки изображений при загрузке страницы:

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

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

  // ...
});

Answer 2

Измените это на фоновое изображение с объединением обоих изображений и динамически измените положение фона.

Использование CSS-спрайтов .

Если вам нужно прикрепить само изображение, то предварительно загрузите два изображения, а затем оно извлечет второе изображение из кэша, что не приведет к задержке.

Предварительная загрузка изображений с помощью CSS

Answer 3

загружает изображение и помещает его в div с непрозрачностью: 0; высота: 0; ширина: 0;

preload_url = $(this).data('hover_image');
$('body').append('<div style="opacity:0;height:0;width:0"><img src="'+preload_url+'"></div>');

Answer 4

Попробуйте: Загрузка изображения и замена при завершении или Предварительная загрузка изображения при загрузке страницы .