jquery 图像加载事件，不适用于 Firefox

Question

我在更改图像的 scr 属性后加载图像时遇到问题。但这仅在 mac 上的 firefox 中不起作用。在 PC 上我还没有测试过。

问题是，图像被加载，函数触发，淡入有效，但显示旧图像，1-2 秒后将显示新图像。可能是加载事件不适用于 Firefox 中的图像？这不是缓存问题，我每次都删除浏览器缓存。

这个函数每 2500ms 就会被 setTimeout 调用一次，在此之前，在另一个函数中我会做同样的初始化。相同的过程，除了淡出。 html 有占位符图像，它获取新的 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 。这对我在 Windows 上使用的 Chrome 和 Firefox 有效(没有 Mac 可以尝试)。对你起作用吗？如果确实如此，请尝试确定您的代码有何不同。
2. 尝试使用 imagesloaded 包装器。请参阅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 中的不同选项。最后的手段是您可以克隆，然后删除图像，然后在旧图像所在的位置淡入新图像。