Discussion :

[Billy KiT]

Bonjour à tous,
Chrome me pose souci pour les JPEG progressifs quand le src d'une image est modifié en dynamique.

sur les autres navigateurs, voici ce qui fonctionne :

Code html :

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

<img id="image_id" src="image1.jpg" />

Code :

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

1
2
3
4
function loadIm() {
   document.getElementById('image_id').src = '';
   setTimeout(function () { document.getElementById('image_id').src = "image2.jpg";},50);
}

première ligne vide l'image (sans quoi cela ne fonctionne pas) et deuxième charge la nouvelle image après un petit délai.
Sur Chrome, la première ligne ne fait rien, pas mieux avec =null, je n'arrive pas à vider la source et le chargement progressif ne fonctionne pas. La seule solution que j'ai trouvée pour le moment est de détruire l'image est de la recréer, mais cela ne convient pas à mon appli.

merci d'avance
BK

[SpaceFrog]

A priori nul besoin de vider le src, une attribution directe doit fonctionner

Code :

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

document.getElementById('image_id').src = "image2.jpg";

Ceci étant il faut le temps de téléchargement de l'image...

Un preloader permettrait de ne modifier le src qu'une fois l'image chargée avec .complete ou onload sur l'image ...

[Billy KiT]

merci SpaceFrog mais ce sont de grandes images (>1Mo) et je veux qu'elles apparaissent progressivement tout en se chargeant.
Cela ne fonctionne pas si on affecte une nouvelle source sans vider le contenu précédent. Le bout de code fonctionne parfaitement sur tous les navigateurs sauf Chrome où l'image n'apparait qu'après avoir été totalement chargée et ce à cause du fait que le src="" n'a pas d'effet.
BK

[SpaceFrog]

Heu la faut se poser la question de la taille des images ...
le web n'est a priori pas fait pour afficher des images aussi lourdes ...

[Billy KiT]

... ben si, quand c'est par exemple pour lire des vieux documents d'archives où c'est écrit tout petit ... mais bon, c'est pas la question
(1Mo = env. 3 Mpixels pas trop altéré = 2000 x 1500, c'est pas énorme non plus)

[SpaceFrog]

faut passer tes images à RIOT ou pngOptimiser (même pour le jpg)
et si elle demeurent trop lourdes il faut les découper ... et en faire un affichage progressif mais par parties ..