加载图像时显示消息

Question

我正在创建应用。在Facebook中，我试图在图像未完全加载时向用户显示消息，当图像完全加载并显示给用户时，消息消失。我使用了以下代码：

function imageloaded()
{
 document.getElementById('testing').setStyle('visibility','hidden');
}

<div id="testing">
<font size="5" color="red">
Please wait to load image completely ......
</font>
</div>

<image src="" onLoad="imageloaded();">

代码在mozilla，google crome中正常工作，但它在IE中不起作用。请帮帮我......

Answer 1

而不是：

document.getElementById('testing').setStyle('visibility','hidden');

尝试：

document.getElementById('testing').setStyle('display','none');

Answer 2

注意：在IE8模式下， getElementById 仅对ID属性执行区分大小写的匹配。在IE7模式和以前的模式下，此方法对ID和NAME属性执行不区分大小写的匹配，这可能会产生意外结果。

'visibility: hidden'隐藏了元素，但它仍占用了布局中的空间。

'display: none'从文档中完全删除元素。它不会占用任何空间，即使它的HTML仍然存在于源代码中。

这两个都在'IE 8'和'Firefox 3.6.8'中工作：

function imageloaded() {
    var element = document.getElementById('testing');
    element.setAttribute("style", "visibility: hidden");
}


function imageloaded() {
    var element = document.getElementById('testing');
    element.setAttribute("style", "display: none");
}

修改

在回复下面的评论时，我使用“http://browsershots.org”在线测试了以下内容，虽然我无法实时检查，但最终输出中仍未显示该文字：

1. Firefox 3.6.8
2. MSIE 6.0 Windows XP
3. MSIE 7.0 Windows XP
4. MSIE 8.0 Windows XP
5. Safari 4.0 Windows XP
6. Safari 5.0 Mac OS X 10.5

所以这应该可以解决问题：

HTML示例：

<div id="testing">
    <font size="5" color="red">
        Please wait for the image to load completely...
    </font>
</div>

<img src="img/test.jpg" alt="" onload="imageLoaded();">

JavaScript示例：

<script type="text/javascript">
    function imageLoaded() {
        var element = document.getElementById('testing');
        element.style.cssText = 'display:none;';
    }
</script>

希望这有帮助！