affichant un message lors du chargement de l'image

Question

Je crée une application. dans facebook en ce que j'essaie de montrer le message à l'utilisateur tandis que l'image n'est pas complètement chargée, le message disparaît quand l'image est complètement chargée et montrée à l'utilisateur. Je code suivant:

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

Le code fonctionne correctement dans mozilla, Google Crome, mais il ne fonctionne pas dans IE. S'il vous plaît aidez-moi ...

Answer 1

Au lieu de:

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

Essayez:

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

Answer 2

Remarque: En mode IE8, getElementById effectue un match sensible à la casse sur l'ID attribut uniquement. En mode IE7 et dans les modes précédents, cette méthode effectue une correspondance insensible à la casse sur les attributs ID et NAME, ce qui peut produire des résultats inattendus.

'visibility: hidden' masque l'élément, mais il occupe toujours de l'espace dans la disposition.

'display: none' supprime complètement l'élément du document. Il ne prend aucun espace, même si le code HTML est toujours présent dans le code source.

Ces deux travaillé dans 'IE 8' et '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:

En réponse au commentaire ci-dessous, j'ai testé les éléments suivants à l'aide en ligne ' http://browsershots.org 'et bien que je ne pouvais pas vérifier en temps réel, le texte n'a pas été visible dans la sortie finale:

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

donc cela devrait faire l'affaire:

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

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

Hope this helps!