Discussion :

[prgasp77]

Bonjour à tous,

sur une page, je souhaite recharger toutes les images qui n'ont pas été correctement chargées au premier essai (utile sur les pages en contenant beaucoup, notamment si elles sont générées à la volée par le serveur).

Je parcours donc toutes mes images, et les teste via image.complete. Malheureusement, toutes les images, y compris celles qui sont non affichées (le alt est affiché à la place) ont pour attribut .complete == true .

So ... help !

[SpaceFrog]

teste a la fois le complete et les dimensions ?

[prgasp77]

Ça m'a traversé l'esprit, mais les images peuvent être de dimension de même ordre que le texte alt affiché ...

[Invité]

peut etre que avec onload sa marchera surtout avec ie (probleme de cache)

Code :

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

monimage.onload

[briegel]

J'opterais aussi pour les évènements onload, onerror et onabort, j'ai eu ce cas et je ne sais plus pourquoi précisément, mais j'avais écarté la propriété complete.

Je crois me souvenir avoir lu qqpart que cette propriété passait à true quand le navigateur considérait qu'il avait fini l'action de chargement de l'image, qu'elle ait échoué ou non : une propriété relativement inutile, donc !

Je cherche en même temps que je rédige, et tout ce que je trouve dit exactement le contraire de ce que j'affirme, pourtant je suis (presque) sûr de ne pas (encore) être zinzin

[prgasp77]

Étant donné que je cherche à détecter les images non chargées, la propriété onload me semble particulièrement inappropriée ...
Te souviens-tu si tu étais parvenu à trouver un discriminant équivalent ? Merci de ton aide.

[briegel]

onabort et onerror. Mais du coup, ça te fait surveiller deux évènements par image dans la page, ça ne semble pas très judicieux, non ?
Et puis en plus, il faut passer l'écouteur avant de commencer le chargement de l'image, donc ça va pas pour ton cas.
Je continue demain, je vais essayer d'éplucher les frameworks, qui doivent bien avoir trouvé une parade pour fiabiliser cette propriété sous FF.

[prgasp77]

J'ai répondu un peu vite tout à l'heure et je m'en excuse. La solution à base de onerror semble prometteuse, j'ai utilisé une fonction similaire : .error() fournie par jQuery. Le code qui suit rafraichit toutes les images correspondant au selector tant que celles-ci ne sont pas affichées (dans une limite de maxReload).

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
// Condition de sélection des images traitées
var selector = '#minipage-content img.thumb';
var maxReload = 15;
 
// Rafraîchissement d'une image non chargée
function refreshById(id) {
   var img = $(selector)[id]; 
   var reloadIndex = img.src.search(/&reload=[0-9]+/);
   if(reloadIndex<0) {
      img.src += '&reload=1';
   } else {
      var reloadDataIndex = reloadIndex+String('&reload=').length;
      var reload = parseInt(img.src.slice(reloadDataIndex));
      if(reload++ > maxReload) return;
      img.src = img.src.slice(0,reloadDataIndex) + reload;
   }
}
 
// Toutes les images sont rechargées lorsqu'une erreur est détectée
$().ready(function() {
   $(selector).each(function(id) {
      $(this).error(function() {
         refreshById(id);
      }, function(){});
   });
});

Je vous remercie de commenter ma méthode et de me proposer une amélioration si vous en voyez une.

[SpaceFrog]

je n'ai pas saisi ton selecteur ?
ou est la collection des images en erreur ?

Code :

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

1
2
3
4
5
$("img").error(function(){
  var imgsrc= $(this).attr('src')
   var timestamp = new Date().getTime();
   $(this).attr('src',imgsrc+'?'+timestamp);
});

[prgasp77]

Salut,
mon sélecteur

Code :

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

var selector = '#minipage-content img.thumb';

sélectionne toutes les images de classe thumb contenue dans l'élément d'id minipage-content.

Ensuite, une fois l'arbre DOM parsé, je surveille les événements onerror/onabort de chacune dedites images ; lorsqu'un tel événement survient j'applique à l'image la fonction refreshById :

Code :

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

1
2
3
4
5
$(selector).each(function(id) {
   $(this).error(function() {
      refreshById(id);
   });
});

Cette fonction refreshById modifie l'attribut src de l'image incriminée en y ajoutant &reload=1 ou en incrémentant la variable reload de son url (les images sont des images créées à la volée par le serveur, leur url est donc déjà de la forme http://adresse/script?var=val).
Au bout d'un certain nombre de tentative, on abandonne.


Concernant le choix $(img).attr('src') / img.src, que conseilles-tu ? Quelles sont les différences ?


Nota : il faudrait vraiment une balise code inline pour les petits bouts de code


Merci encore.

[Invité]

en gros si j'ai bien compris seul les images mal affiché son recharger et pour eviter les problemes de cache on modifie le src de l'image afin de forcer le navigateur a recharger l'image en lui faisant croire que c'est une nouvelle image

[prgasp77]

C'est exactement mon but. Mais comme à chaque fois que je code en javascript, la solution que je trouve me semble brouillon. Je voulais donc savoir s'il y avait plus élégant. Une idée te viens en tête ?

Merci.

[Invité]

je me suis deja pris la tete avec ces histoires de prechargement et selon mois ce que tu considere comme brouillon n'en est pas un mais plutot une solution afin de contourner une lacune qu'on les navigateurs

[le_chomeur]

peut-être un script a faire en pur js ( sans lib ) et à ajouter dans la faq ?

[prgasp77]

Pourquoi pas si ça peut servir à d'autres. Comment faire pour proposer un bout de code ?

[SpaceFrog]

Commence par le poster dans les contributions