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.

[SpaceFrog]

Avec Jquery

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
        $('img').hide() 
        .one('load', function() { 
          $(this).fadeIn(); 
        })
        .attr('src', src) 
        .each(function() {
          //Pour les nav qui ne declenchent pas de load sur les images 
          if(this.complete) $(this).trigger('load');
        });
    });
});

[FixSan]

D'accord. Mais je distingue toujours mal ce qu'il faut mettre dans chacune des deux parties du "if... else".

J'ai tenté ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var image = new Image();
image.src = src;
if (image.complete) {
	// Puisque l'image est chargée, on se contente d'ajouter l'attribut "alt", et de la faire apparaître en fadeIn
	$('.monimage').attr('alt', alt).fadeIn();
} else {
	image.load(function() {
		// L'image n'étant pas chargée, on la charge, et on l'affiche ensuite
		$('.monimage').attr({src: src, alt: alt}).fadeIn();
	}).attr('src', src);
}

Mais c'est, de nouveau, un coup d'épée dans l'eau...

[SpaceFrog]

Mais c'est, de nouveau, un coup d'épée dans l'eau...

ça fait des bulles ?

Nos posts on du se croiser

[FixSan]

En effet, ils se sont croisés.

Mais le code suivant me donne exactement le même résultat (cf., comme précédemment, en ligne) :

Code :

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

1
2
3
4
5
$('image')
	.hide()
	.one('load', function() { $(this).fadeIn(); })
	.attr('src', img[x]['src'])
	.each(function() { if (this.complete) $(this).trigger('load'); });

[FixSan]

Le problème serait donc ailleurs ?

Voici l'ensemble de la fonction :

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
23
24
25
26
27
img = new Array(Array);
$.get('../dotclear-files/themes/biblio/js/dynamic_ajax_php.php', function(data) {
	var w = 0;
	$(data).find('image').each(function() {
		if (!img[w]) img[w] = new Array();
		img[w]['url'] = $(this).find('url').text() + '#comments';
		img[w]['src'] = $(this).find('src').text();
		img[w]['title'] = $(this).find('title').text();
		img[w]['width'] = $(this).find('width').text();
		img[w]['height'] = $(this).find('height').text();
		w++;
	});
	$("#carousel-comments").append('<ul></ul>');
	for (x=0; x<3; x++) {
		$('#carousel-comments ul')
			.append('<li><a href="' + img[x]['url'] + '#comments" title="' + img[x]['title'] + '">')
			.append('<img alt="' + img[x]['title'] + '" class="jcarousel-img jcarousel-img-' + x + '" width="' + img[x]['width'] + 'px" height="' + img[x]['width'] +'px" />')
			.append('</a></li>');
		var image = new Image();
		$('image')
			.hide()
			.one('load', function() { $(this).fadeIn(); })
			.attr('src', img[x]['src'])
			.each(function() { if (this.complete) $(this).trigger('load'); });
	}
	$('#carousel-comments').jcarousel('reload');
}, 'xml');

Le tableau img[] est correctement rempli. Je suis donc sûr que la première partie de cette fonction marche correctement. Y aurait-il un problème au niveau de mes "append" ?

[SpaceFrog]

Code :

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

$('image')

c'est une nouvelle balise <image /> .?...

[FixSan]

Pfff... Quel bêta je fais... Il fallait lire : $('.monimage') dans mon code.

Ca fonctionne très bien maintenant. Merci !

Au lieu de cacher l'image tant qu'elle n'est pas chargée, y a-t-il moyen d'afficher un loader (gif animé) ? Puis-je me contenter de le mettre en background de ma balise img ? Ne sera-t-il pas caché lui aussi ?

[SpaceFrog]

le souci sera le même avec ton image loader, le temps qu'elle se mette au moins une fois en cache.

Sinon il existe des plugins "image loader en jquery"

[FixSan]

Je comprends. Mais le loader se charge généralement beaucoup plus vite que les autres images.

De plus, il s'agit d'un carrousel. Donc lors du chargement de la page, ce n'est pas très important si le loader ne s'affiche pas immédiatement. Néanmoins, il se trouve dans le cache une fois le chargement terminé. Donc lorsqu'on fait défiler le carrousel, le temps que les images se chargent, on verra bien le loader.

Celui-ci peut-il donc s'appliquer au background de l'image ? Ou dois-je l'ajouter quelque part dans le code jQuery ci-dessus ?

[SpaceFrog]

tu peux essayer de le mettre en background de l'image ...
en position center center ..

[FixSan]

D'accord. Un grand merci !

[FixSan]

Je reprends ce billet un mois plus tard, pour ce petit problème de loader : il s'agit d'afficher une image (loading.gif) en background, durant le temps où l'image se charge. Le chargement de l'image s'effectue grâce au code suivant :

Code :

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

1
2
3
4
5
6
7
var item = $('<li><a class="black-links" href="' + data.url + '#comments" title="' + data.title + '"><img class="loading"></a></li>');
var img = item.find('img');
img
	.hide()
	.one('load', function() { $(this).removeClass('loading').attr('alt', data.title).attr('width', data.width).attr('height', data.height).fadeIn(); })
	.attr('src', data.src)
	.each(function() { if (this.complete) $(this).trigger('load'); });

Il y a donc une class "loading" au départ sur l'image, que l'on supprime une fois l'image chargée. Côté CSS, ça donnera donc :

Code :

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

.loading { background: #FFF url(../img/loading.gif) 112px 112px no-repeat; }

Le problème est le suivant : l'image est chargée sans problème, puis s'affiche correctement, mais le loader n'est jamais affiché durant le chargement (c'est visible ici).
J'ai pensé à supprimer le ".hide()"... mais cela ne va-t-il pas entraîner l'affichage partiel de l'image AVANT qu'elle ne soit entièrement chargée ?

Merci de votre aide !

[FixSan]

Mmm... Ça ne soulève pas l'enthousiasme des foules

J'ai changé le code jQuery par ceci :

Code :

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

1
2
3
4
5
var item = $('<li><a class="black-links" href="' + data.url + '#comments" title="' + data.title + '"><img class="loading"></a></li>');
var img = item.find('img');
$('<img/>')
	.attr('src', data.src)
	.load(function() { img.removeClass('loading').attr({src: data.src, alt: data.title, width: data.width, height: data.height}).hide().fadeIn(); });

Mais ça ne fonctionne toujours pas : tout simplement comme si l'élément <img> n'existait pas (par exemple, quand j'attribue un background noir à img.loading en CSS, il n'est pas pris en compte !)

Une idée ? Merci pour votre aide !