改变img标签的src属性后触发效果

Question

我使用此代码更改图像标签的 src 属性（使用原型和 scriptaculous）：

new Effect.Fade("images",{afterFinish:
function()
{
    $("detail").setAttribute("src", "img/02.jpg");
    new Effect.Appear("images",{duration:0.8});
}
});

其中“images”是容器（div），“detail”是 img 标签 结果是当前图像消失，出现，然后新图像突然出现。 我的问题是，如何检查新图像是否已被浏览器完全加载以触发 Effect.Appear？ 还有其他方法可以做到这一点吗？

Answer 1

图像有一个可以连接的 onload 事件：

$("detail").onload = function() 
 { do_stuff(); }  // Remember to do this BEFORE changing the src

根据我的经验，它有时有点不稳定（有时似乎没有被执行）。最好预加载图像并仅在加载完整文档后才允许此效果（onload 而不是 dom:load 或 ready）。

Answer 2

替换

new Effect.Appear("images",{duration:0.8});

为

Event.observe("detail", 'load', function() {
    new Effect.Appear("images",{duration:0.8});
    Event.stopObserving('detail', 'load'); 
});

要告诉用户您正在加载图像，您可以为图像设置一个 css 背景，带有旋转圆圈或任何适合的背景。