jQuery swap-изображение на основе выпадающего списка выбора

Question

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

У меня все работает, однако проблема, с которой я сталкиваюсь, как-то при обмене, показывает исходное изображение/мигает, а затем появляется новое изображение. То, что я хотел, было плавное исчезновение и исчезновение ... Я думал, что мой сценарий делает именно это, но как-то он не работает. Можете ли вы определить причину?

image.fadeTo('fast',0, function() { 
    image.attr("src", newImageSource).fadeTo('fast',1); 
}); 

Снова это работает, но сначала оно мигает исходным изображением, прежде чем показывать замененный. Я даже попытался поставить задержку, но это не помогло.

Answer 1

image.fadeTo('fast',0, function() { 
    var tempImg = $('<img src="' + newImageSource + '">'); 
    $(tempImg).load(function(){ 
     image.attr("src", newImageSource).fadeTo('fast',1); 
    }); 
}); 

создать временный файл с новым источником изображения, а затем, как только он будет загружен (имейте в виду, что это не в DOM, пользователь никогда не увидит) другое изображение утрачен назад. Это asures что новое изображение было загружено, прежде чем пытаться угаснуть его, то есть , вероятно,, что вызывало ваше заикание.