Question

我在更改scr属性后加载图片时遇到问题。但这只适用于mac上的firefox。在PC上我还没有测试过。

问题是，图像被加载，函数触发，fadein工作，但显示OLD图像，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

我可以建议一些事情： -

尝试缩小问题范围。请参阅 this jsfiddle 。这适用于我在Windows上使用Chrome和Firefox（没有可试用的Mac）。对你起作用吗？如果是，请尝试确定代码的不同之处。
尝试使用imagesloaded包装器。见here。它通过加载图像来处理一些跨浏览器的怪异问题，在您的情况下可能会有所帮助。
尝试在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中的不同选项。最后一种方法是你可以克隆，然后删除图像，然后淡入旧图像所在的新图像。

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

1 个答案: