Question

在我的设置上，我使用jquery淡化图像，将其源更改为其他内容，然后淡入。但是，有时在慢速连接时，图像将在源完全更改之前淡入，因此旧图像将在新的进入之前，它仍会出现一小段时间。

有没有办法在attr上进行回调，只有在反映attr变化时才会调用淡入淡出？

$(".img").fadeTo("fast",0,function(){
    $(".img").attr({
        //some other stuff
        'src':url
    });
    $(".img").fadeTo("fast",1);
    //other stuff
});

我使用fadeTo而不是fadeIn（），因此保留了图像大小。

Answer 1

将事件处理程序绑定到图像上的load event，并在处理程序中将其淡出。

Answer 2

您想要检查图像何时加载？ .load()有效。

注意：我从未见过它，但我读过它可能会过早触发。所以你可能想检查图像的高度。

$(".img").fadeTo("fast",0,function(){
  $(this).attr({'src':url});
  $(this).load(function(){ 
    $(this).fadeTo("fast",1);
    $(this).unbind("load");
   });
});

Answer 3

您需要预加载图像，并在加载图像时处理加载事件。

var img = new Image();
$(img).load(function() {
  // Do fading and attr swapping stuff here
  // The new image is already loaded at this point
});

img.src = myImgUrl;

当加载img时，你的函数会被调用，你的淡入淡出就会发生。该图像现在已缓存并可供使用，并将立即显示。

jquery .attr（）与回调？

3 个答案: