prototypejs - 修改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:loador 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 背景，带有一个旋转的圆圈或任何适合的东西。