Discussion :

[FixSan]

Bonjour,

J'utilise le code suivant, qui fonctionne sans problème :

Code :

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

$('.monimage').attr({src: src, alt: alt}).fadeIn();

L'image est correctement affichée, à l'endroit voulu.

J'aimerais néanmoins qu'elle ne soit affichée que lorsqu'elle est entièrement chargée. J'ai donc remplacé le code précédent par ceci :

Code :

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

1
2
3
4
var img = new Image();
$(img).load(function() {
	$('.monimage').attr({src: src, alt: alt}).fadeIn();
}).attr('src', src);

Et là, c'est le drame : l'image ne s'affiche plus !

Si quelqu'un voulait voir le résultat en ligne, il s'agit du 3ème carousel (sous le titre "C'est vous qui le dites !") sur cette page, où l'on voit que le title des images est affiché, mais pas l'image elle-même.

Quelqu'un comprend-il pourquoi ? Merci de votre aide !

[Bovino]

Si l'image est déjà dans le cache du navigateur, l'événement load n'est pas forcément déclenché, il faut coupler avec un test sur l'attribut complete d'un objet image.

[FixSan]

Non, non, l'image n'est pas dans le cache : cache vidé, premier chargement...

Néanmoins, pour vérifier, comment pourrais-je "coupler avec un test sur l'attribut complete de l'objet image" ?

[Bovino]

Code :

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

1
2
3
4
5
6
7
8
9
10
var image = new Image();
image.src = src;
if(image.complete){
    // traitement
}
else{
    image.onload = function(){
        // traitement
    };
}

[FixSan]

Mmmm... Je ne suis pas sûr de bien comprendre (j'apprends).

J'ai mis le code suivant :

Code :

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

1
2
3
4
5
6
7
8
var img = new Image();
if ($(img).complete) {
	$('.monimage').attr({src: src, alt: alt}).fadeIn();
} else {
	$(img).load(function() {
		$('.monimage').attr({src: src, alt: alt}).fadeIn();
	}).attr('src', src);
}

Mais ça ne change rien : l'image ne s'affiche toujours pas...

[Bovino]

Parce que tu passes par jQuery, qui est inutile ici.
$(img) correspond à un objet jQuery, pas à un objet du DOM, or un objet jQuery ne possède pas de propriété complete.
Ensuite, tu ne peux pas tester la propriété complete si tu n'as pas attribué de src à ton image.