Préchargement d'une image jQuery

**a-side** · 29/08/2013, 12h49

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 29/08/2013, 13h00

=>avec le callback de load()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

monimage.load(function(){ // ici c'est un callback })

**a-side** · 29/08/2013, 15h22

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

**danielhagnoul** · 30/08/2013, 01h18

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**a-side** · 30/08/2013, 14h51

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Préchargement d'une image jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager