showing message while loading image

Question

Hi, I m creating app. in facebook in that i m trying to show message to user while image is not completely loaded, the message is disappears when image is loaded completely and displayed to user. I used following code:

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();">

The code works properly in mozilla, google crome but it doesn't work in IE. Please help me...

Answer 1

Instead of:

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

Try:

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

Answer 2

Note: In IE8 mode, getElementById performs a case-sensitive match on the ID attribute only. In IE7 mode and previous modes, this method performs a case-insensitive match on both the ID and NAME attributes, which might produce unexpected results.

'visibility: hidden' hides the element, but it still takes up space in the layout.

'display: none' removes the element completely from the document. It does not take up any space, even though the HTML for it is still present in the source code.

Both of these worked in 'IE 8' and '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");
}

EDIT:

In response to the comment below, I tested the following online using 'http://browsershots.org' and although I couldn't check this in real-time, the text was not visible in the final output:

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

So this should do the trick:

HTML Sample:

<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 Sample:

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

Hope this helps!