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背景，使用旋转圆圈或任何适合的图片。

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

2 个答案: