11549 sujets

JavaScript, DOM et API Web HTML5

Préchargement d'une image jQuery

Bonjour,

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

<!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').html('<img src="http://www.site.com/'+$(this).val()+'.jpg" width="200px">');
	$('#img').hide().fadeIn('fast');
});
</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.
Modifié par a-side (29 Aug 2013 - 17:33)
salut,
je ne sais pas ce que ça donnerait en JQuery mais la fonction native est "load". Je crois que pour JQuery c'est ready. En gros un truc du genre

$('#img').ready(function(){
   this.hide().fadeIn('fast');
})

Je ne sais pas si la syntaxe est juste je ne m'y connais pas en JQuery.
Merci, il s'agit en fait de load(), mais je ne sais pas le placer dans le code sans qu'il me bloque le reste.
euuuh non, load() est une toute autre chose, c'est pour un chargement AJAX. C'est bien ready(). Si non tu le fais sans JQuery, ça marche aussi et c'est beaucoup plus simple.
J'ai réussi en modifiant un peu le code :

<!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.
Zelalsan a écrit :
euuuh non, load() est une toute autre chose, c'est pour un chargement AJAX. C'est bien ready(). Si non tu le fais sans JQuery, ça marche aussi et c'est beaucoup plus simple.


Oui en fait c'est tragique ou non, mais il y a deux fonctions jQuery qui s'appelle load, une pour l'event de chargement d'une page ou d'une image et l'autre pour la requête Ajax. Il ne faut juste pas se mélanger les pinceaux. Smiley biggol
La méthode load() correspond à un évènement, elle est dépréciée depuis jQuery 1.8 donc il faut éviter de l'utiliser car elle sera supprimée dans le futur.

A la place il faut utiliser on().


$('#img').on('load', function() {
  $(this).fadeIn('slow');
});
Sujet clos
Aller à