Préchargement d'une image jQuery

Version imprimable

Bonjour,

Je tente d'afficher une image dont l'url dépend d'un nombre tapé dans un input.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <input type="text" size="7" maxlength="7" id="id"> <div id="img"></div> <script> $('#id').focus(); $('#id').keyup(function(){ $('#img').hide().fadeIn('fast'); $('#img').html('<img src="http://www.site.com/'+$(this).val()+'.jpg" width="200px">'); }); </script> </body> </html>
Le fadeIn() ne fonctionne que si l'image est en cache. Comment procéder pour que l'image n'apparaisse que lorsqu'elle est chargée ?
Merci d'avance pour vos réponses.

29/08/2013, 13h00
SpaceFrog

=>avec le callback de load()

Code:

monimage.load(function(){ // ici c'est un callback })
29/08/2013, 15h22
a-side

Merci, malheureusement je ne sais pas comment placer le load() sans bloquer le traitement du script.

Il est possible de montrer une image suite à un événement "keyup" et d'utiliser la fonction de rappel (callback) de la méthode load pour faire apparaître la division contenant l'image seulement lorsque cette image est chargée, exemple :
Code:

1 2 <input id="inpuID" type="text"> <div id="divImgID"></div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $( function(){ $( "#divImgID" ).hide(); $( "#inpuID" ).on( "keyup", function(){ $( "<img/>", { "src" : "http://danielhagnoul.developpez.com/images/imageTest.png", "load" : function(){ $( "#divImgID" ).fadeIn( "fast" ); } }).appendTo( "#divImgID" ); }); });
Mais construire une URL valide ("http://www.site.com/'+$(this).val()+'.jpg") sur un seul événement "keyup" c'est impossible !

Il faut utiliser l'événement "change" pour récupérer le contenu de l'input, mais la validité de l'URL sera toujours aléatoire.

J'ai réussi en modifiant un peu le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$('#id').focus();
	$('#id').keyup(function(){
		$('#img').attr('src', 'http://www.site.com/'+$(this).val()+'.jpg');
		$('#img').hide();
	});
	$('#img').load(function(){
		$('#img').fadeIn('slow');
	});
});
</script>
</head>
<body>
<input type="text" size="7" maxlength="7" id="id"><br>
<img id="img" width="200px">
</body>
</html>

Merci pour votre aide.