jquery .attr() 与回调？答案

【问题标题】：jquery .attr() with callback?jquery .attr() 与回调？
【发布时间】：2010-10-28 07:31:24
【问题描述】：

在我的设置中，我使用 jquery 淡出图像，将其源更改为其他内容，然后淡入。然而，有时在慢速连接上，图像会在源完全改变之前淡入，所以旧图像会在新的出现之前仍然会出现一秒钟。

有没有办法在 attr 上进行回调，以便仅在反映 attr 更改时才调用淡入？

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

我使用fadeTo 而不是fadeIn()，所以图像大小被保留。

【问题讨论】：

标签： jquery html css image

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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 被加载时，你的函数将被调用并且你的淡入淡出将会发生。图像现在已缓存并可以使用，并且会立即显示。

【讨论】：

如果同一元素上的.load() 已经被触发过一次，它是否会被重新触发？
此示例为您加载的每个图像创建一个新对象，并将load 事件仅绑定一次到该对象。即使图像已经加载，load is 事件仍然会被触发和处理。所以这里根本没有“相同的元素”，因为它每次都是一个新对象。

【解决方案3】：

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

注意：我从未见过它，但我读过它可以过早触发。因此，您可能需要检查图像的高度。

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

【讨论】：

这不会将“加载”绑定到 .img 上，每次运行此代码时都会添加越来越多的绑定？在全局范围内添加绑定可能更安全。
是的。接得好。如果.load() 已经被重新触发，我不记得它是否会重新触发。 @Squeegy 如果有，下面有一个解决方案，如果没有，这个是一个解决方案。我记得我以前使用.load()时发生了一些可疑的事情。
我添加了一个取消绑定。尝试比较我们的代码，看看@squeegy 是否正确。
链接你的jQuery函数，缓存它们，这样你就应该只调用一次而不是调用$()四次
@yi，链接是否保证在下一次运行之前完成一个功能？我记得前一阵子做了 $("something").fadeOut().fadeIn() ，但效果不太好。