Exécuter le code JavaSCript après le préchargement de l'image

J'essaie de créer un type de code de rappel qui s'exécute après qu'une image a été préchargée.Exécuter le code JavaSCript après le préchargement de l'image

Code Mon JS est comme suit:

<script type='text/javascript'> 
d=document; 
window.onload=function() 
{ 
    if (d.images) 
    { 
     d.getElementById('preload').style.display='block'; 
     i1=new Image; 
     i1.src="http://link_to_image"; 
     d.getElementById('preload').style.display='none'; 
    } 
} 
</script>

Ainsi, dans mon exemple, d.getElementById('preload').style.display='none'; doit être exécuté après que l'image a été complètement chargée dans le cache.

Une aide pour y parvenir? S'il vous plaît seulement des solutions JavaScript autonomes sans exigences de bibliothèque/plugin.

Source

2010-02-04 EarthMind

Je viens de découvrir que 'setInterval (" si (i1 .complete) {...} ", 500)' est une bonne solution. Edit: Mais pas aussi bon que les solutions suggérées ci-dessous. – EarthMind

Oui, vous devriez éviter l'argument chaîne de 'setInterval' /' setTimeout'; passer un 'fonction() {...}' à la place de préférence. Il n'y a pas non plus d'attribut 'complete', seulement' readyState' (et c'est non-standard, donc 'onload' est toujours le meilleur). Vous pouvez également perdre le test 'if (document.images)' car le dernier navigateur à ne pas le supporter était Netscape 2! :-) – bobince

Je ne suis pas sûr de savoir comment l'image fiable événement onload est dans tous les navigateurs, donc je tester très attentivement:

var i1 = new Image(); 

i1.onload = function() { 
    d.getElementById('preload').style.display = "none"; 
}; 

i1.src = "http://link_to_image";

Source

2010-02-04 15:01:32

Jetez un oeil à cet article, je pense que ça va aider: link text

comme beaucoup d'autres objets JavaScript, l'objet image() est également livré avec certains gestionnaires d'événements. Le plus utile d'entre eux est sans aucun doute le gestionnaire onLoad(), qui est appelé lorsque l'image a terminé le chargement.

Source

2010-02-04 14:56:42 MoJo2600

C'est "onload", pas "onLoad". –

Utilise onload dans l'image elle-même.

<img src="http://link_to_image" onload="alert('IMG LOADED')" />

Source

2010-02-04 15:00:40 Ben

Exécuter le code JavaSCript après le préchargement de l'image

Répondre

Questions connexes