Question

我正在更改图像节点的图像src。我希望能够在执行某些代码之前确保它已被更改。我该怎么做？

现在我有

function changePic(imgNode, newPic, desc){
    var descNode = $("#description");
    $(imgnode).fadeTo(500, 0, function(){
        $(imgnode).attr("src", newPic);
        $(imgnode).attr("alt", desc)
        descNode.text(desc);
        $(imgnode).fadeTo(500, 1);
    });
}

如果服务器的快速/本地服务器，则效果很好。如果服务器速度很慢，那么图像会在更改之前淡入其中...

任何想法？

编辑：我在调用changePic时加载图像。有没有更好的方法呢？

更多：为什么放最后一行不是一个好主意，

$（imgnode）.fadeTo（500,1）;

，在回调函数之外？

Answer 1

Preload the image，但要确保它已完全加载，请使用.load() event。

引用：

将load事件发送给元素当它和所有子元素一直存在时完全装满了。这个事件可以发送到与a关联的任何元素网址：图片，脚本，框架，iframe，和窗口对象。

不要错过这一行：

有可能是load事件如果图像是，将不会被触发从浏览器缓存加载。至考虑到这种可能性，我们可以使用触发的特殊加载事件如果图像准备就马上。 event.special.load目前 available as a plugin

我汇总了一个我认为你希望它如何工作的例子。我在通过Google图片找到的三张图片之间切换。我在更改图像的src之前绑定了load事件以确保它被触发。 http://jsfiddle.net/xdjjR/1/

Answer 2

我想，您可以在隐藏元素中预加载图像，以便加载其他html。当源更改时，应立即显示此类图像。

Answer 3

使用回调参数 doc 来自doc：

$('#clickme').click(function() {
 $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

确保在动态更改jquery时加载图像

3 个答案: