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中的不同选项。最后的手段是你可以克隆，然后删除图像，然后淡入旧图像的新图像。