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

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 .

引用:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

不要错过这一行:

It is possible that the load event will not be triggered if the image is loaded from the browser cache. To account for this possibility, we can use a special load event that fires immediately if the image is ready. event.special.load is currently available as a plugin.

我整理了一个示例，说明我认为您希望它如何工作。我在通过 Google 图片找到的三张图片之间切换。我在更改图像的 src 之前绑定(bind)加载事件以确保它被触发。 http://jsfiddle.net/xdjjR/1/