показ сообщения при загрузке изображения

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 Кром, но он не работает в IE. Пожалуйста, помогите мне ...

Answer 1

Вместо:

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

Try:

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

EDIT:

В ответ на комментарий ниже, я проверил следующее в Интернете с помощью ' 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> 

Надеется, что это помогает!