奇怪JQuery的圖像淡入/淡出行爲

我有這個網站：奇怪JQuery的圖像淡入/淡出行爲

<div class='rightTile' > 
    <img class='bigFace' src='content/images/teamSlide/zdjecie-Basia.png'> 
</div>

，我使用這個jQuery的代碼來淡出/淡入圖片：

$('.someElement').on('click', function(){ 
    $('.bigFace').fadeOut('fast', function(){ 
     $('.bigFace').attr('src', anotherPicPath).fadeIn(); 
    }); 
});

我有「someElement」類的許多元素而在data-src中則有不同的圖像來源。問題是，當我第一點擊與類someElement特定元素：

當前bigFace圖像fadesOut
比fadesIn（具有相同的源）
和比圖像更改一個新的src

當我再次點擊相同的元素，例如。第二次，它完美：

當前bigFace圖像fadesOut，
比換源fadesIn的img。

我認爲這可能是與圖像預加載相關的東西，所以我用CSS預加載它們，但它沒有給我提供任何東西。作爲一種有力的測試方法，我甚至觸發點擊每個.someElement元素，但它仍然沒有效果。

它只發生在我將代碼上傳到外部服務器時（生產可以說）。在本地主機上 - 一切都很好。

我不知道爲什麼。請幫忙:) 問候！

來源

2014-06-26 azrahel

可以請你分享一個jsfiddle它。 –

你可以看看這個問題：[鏈接]（http://stackoverflow.com/questions/9959926/smooth-image-fade-out-change-src-and-fade-in-with-jquery），它可以幫助你檢查圖像何時加載，然後淡入新圖像。 –

這是小提琴：http://jsfiddle.net/e5st4/17/ 它比真實代碼更簡單，因爲我改變了更多的屬性當點擊圖像轉換器時，不僅僅是img。但在JSFiddle中，它的工作原理應該與我在服務器上的代碼不同...... – azrahel

瀏覽器需要加載圖像數據，一旦顯示圖像數據就會發生。預加載圖像，你必須顯示它之前將其初始化：

$('.someElement').on('click', function(){ 
    var image= new Image(); 
    $(image).load(function() { 
     $('.bigFace').fadeOut('fast', function(){ 
     $('.bigFace').attr('src', image.src).fadeIn(); 
    }); 
    image.src = anotherPicPath; 
});

這樣，圖像首先加載，然後交換。注意，點擊和圖片交換之間可能會有一些秒......

您的提琴：http://jsfiddle.net/e5st4/18/

來源

2014-06-26 10:19:57

您可以檢查出這個問題：smooth-image-fade-out-change-src-and-fade-in-with-jquery，它可以幫助你檢查圖像加載時，則漸顯新圖像，如下面的代碼：

$('.click').click(function() { 
    $('img.class').fadeOut(300, function(){ 
     $(this).attr('src','new_src.png').bind('onreadystatechange load', function(){ 
     if (this.complete) $(this).fadeIn(300); 
     }); 
    }); 
});

來源

2014-06-28 03:46:37

奇怪JQuery的圖像淡入/淡出行爲

回答

相關問題