加載圖片時顯示消息

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. 火狐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> 

希望這有助於！