jquery圖像加載事件，不用火狐工作

Question

我在更改scr屬性後加載圖像時出現問題。但這隻適用於Mac上的Firefox。在電腦上，我還沒有測試過。

問題是，圖像加載後，功能啓動，淡入淡出效果，但顯示舊圖像，1-2秒後新圖像將顯示。可能是加載事件不工作與Firefox中的圖像？它不是緩存問題，我每次都刪除瀏覽器緩存。

這個函數每2500ms調用一次setTimeout，在此之前，在另一個函數中，我對初始化做了相同的操作。相同的過程，除了被淡出。 html有placeholderimages，它獲得新的src屬性，然後淡入，一切都很好。

但在改變它的功能不工作..

// change photos 
function changeImg(feed) { 
    var images = $('#instafeed img'); 
    var rand = Math.floor(Math.random() * 8); 

    $(images.eq(rand)).fadeOut(500, function() { 
    $(images.eq(rand)) 
    .one('load', function() { 
     $(this).fadeIn(500); 
    }) 
    .attr("href", feed.data[bildIndex].link) 
    .attr("src", feed.data[bildIndex].images.low_resolution.url); 

    if(this.complete) $(this).trigger('load'); 
    bildIndex++; 
    if (bildIndex == 14) bildIndex = 0; 
    });     
} 

Answer 1

有些事情，我可以建議： -

1. 儘量縮小問題了。見this jsfiddle。這適用於我在Chrome和Firefox上使用的Windows（沒有Mac可以嘗試）。對你起作用嗎？如果確實如此，則嘗試確定代碼的不同之處。
2. 試試imagesloadedloaded wrapper。見here。它處理一些加載圖像的跨瀏覽器的怪異事件，並可能有助於您的情況。
3. 嘗試將一個唯一參數附加到src屬性，以強制圖像不被從緩存中檢索。例如.attr("src", feed.data[bildIndex].images.low_resolution.url + "?" + new Date().getTime());。由於圖像最終會加載，所以我不確定它會對您的情況有所幫助。

我還注意到你正在設置一個href的圖像。我不認爲href是html img元素的有效屬性。

爲了完整起見，的jsfiddle代碼：

HTML：

<img src ='origSrc'> 
<button onclick='changePic();'>click me</button> 

的Javascript：

function changePic() 
{ 
    var $theImage = $('img'); 

    $theImage.fadeOut(500, function() { 
     $theImage.one('load', function() 
      { 
       $(this).fadeIn(499);  
      } 
     ) 
     .attr("src","newSrc");  
     if(this.complete) $(this).trigger('load');  
    }); 
} 

從我們在評論中發現似乎爲Firefox if(this.complete)總是返回true。如果你刪除這一行，那麼它工作正常。這似乎是一個已知的問題，請看this question中的不同選項。最後的手段是你可以克隆，然後刪除圖像，然後淡入舊圖像的新圖像。