JPEG progressif et Chrome

**Billy KiT** · 03/12/2012, 11h10

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** · 03/12/2012, 11h23

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** · 03/12/2012, 11h42

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** · 03/12/2012, 12h01

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** · 03/12/2012, 12h44

... 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** · 03/12/2012, 12h47

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 ..

**Bovino** · 03/12/2012, 13h56

Ensuite, je comprends pas trop ton problème... Le but, c'est quand même d'afficher les images non, pas le chargement progressif...

Ce qui explique probablement le comportement de Chrome.

Ensuite, au pire, tu peux afficher un loader en attendant le chargement complet

Code :

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

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

**Billy KiT** · 03/12/2012, 14h47

J'aurais tendance à vous dire que ce n'est pas du conseil en stratégie ou en optimisation de photos dont j'ai besoin, mais je vais plutôt reposer ma question. Le code simpliste ci-dessous a un comportement différent sur Chrome, et c'est bien le comportement des autres navigateurs que je souhaite, voudrais, aimerais avoir (pour des tas de raisons que je crois pas avoir à justifier) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<script>
function go() {
newSrc = "http://upload.wikimedia.org/wikipedia/commons/b/b0/Ancienne_Ferme_-_annexe_1_-_paysage.jpg";
document.getElementById('im').src="";
setTimeout(function(){document.getElementById('im').src=newSrc;},50);
}
</script>
</head>
<body>
<input type="button" value="SUIVANT" onclick="go()"/>
<img id='im' src='http://www.metiersdupaysage.com/wp-content/gallery/photos/img_0316.jpg'>
</body>

Testable, les images sont sur le net. Quand j'appuie sur "SUIVANT" sur Chrome, je dois attendre la fin du chargement de l'image avant de la voir (oui je pourrais mettre un gif d'attente) alors que sur les autres navigateurs, l'image commence à se charger ligne par ligne et je la vois apparaitre petit à petit, miracle

. J'ai peut-être donné de mauvaises pistes en parlant du jpeg progressif, on peut penser à celui qui s'affiche par couches, flou puis de plus en plus clair.
pardon d'insister, désolé si je n'ai pas été clair (flou)
BK

**SylvainPV** · 03/12/2012, 16h07

A ma connaissance il n'y a aucun standard selon lequel les images devraient s'afficher ligne par ligne au chargement. C'est plus une relique de l'ère pré-ADSL, mais comme Chrome est arrivé après, ça ne m'étonnerait pas qu'ils n'aient pas codé ce comportement.

Si tu tiens absolument à avoir cet affichage progressif, il faudra coder un script plus complexe pour charger ton image et parser des états intermédiaires de cette image pendant son chargement. Je te souhaite bien du courage car ça semble très complexe, surtout que rien ne garantit que le chargement se fait bien de manière totalement synchrone. En principe oui mais va savoir avec le code des navigateurs d'aujourd'hui...

**Billy KiT** · 03/12/2012, 16h25

merci SylvainPV,
je tiens juste à préciser que c'est bien un comportement "normal" de Chrome, et cela fonctionne très bien. Tu peux taper l'adresse url d'une image de 12M, et tu verras qu'elle se charge de haut en bas. Cela fonctionne aussi en dynamique en modifiant le .src MAIS seulement si la balise img n'a pas d'attribut src "en dur" au départ ou que celui-ci est vide (src='').
BK

**SylvainPV** · 03/12/2012, 18h56

Dans ce cas tu peux peut-être essyaer de supprimer et recréer le tag <img> en Javascript

**Billy KiT** · 03/12/2012, 19h48

je l'ai évoqué dans mon premier message, ça fonctionne mais ça me pose des problèmes car je manipule pas mal cette image. C'est une solution de secours, je pensais qu'il y avait plus simple.

**NoSmoking** · 03/12/2012, 19h59

Bonjour,
et qu'advient-il lorsque l'image est en cache, adieu la "belle" progression.

C'est le moteur de rendu de Chrome qui gère différemment les affichages des modifications, ton salut me semble être donc de gérer toi même l'apparition de ton image une fois chargée.

Perso l'affichage progressif je trouve cela très moyen, mais bon ...

Invité · 03/12/2012, 20h03

si ça ne fonctionne pas uniquement avec chrome il doit à tous les coups s'agir d'un bug

**lightbulb** · 05/12/2012, 17h21

Pour une image lourde le seul avantage de l'apparition progressif est d'indiquer à l'utilisateur que quelque chose se passe sur le navigateur car parfois elle est chargée seule sur une page blanche, c'est un comportement présent depuis le début du web mais qui est de plus en plus obsolète.

Une fois dans le cache l'image est affichée instantanément et c'est le but, si c'est juste pour l'effet de style il faut l'indiquer au navigateur en utilisant jquery avec un animate() par exemple.

Pour les sites récents on a tendance à utiliser un petit gif de loading qui est remplacé par la div sur l'évènement onload de l'image, ainsi le gif indique qu'un chargement est en cours et une fois l'image chargée on peut l'afficher avec n'importe quel effet, fondu, slide....

**Billy KiT** · 06/12/2012, 01h31

Ce n'est pas un effet de style qui est recherché. L'animation gif est en place depuis longtemps sur cette application. C'est donc pour une amélioration du service 1- pour savoir en combien de temps environ l'image va se charger (car c'est la grande inconnue quand on voit "loading ...") 2- c'est mieux de voir que quelque chose se passe 3- l'image contient du texte (ancien), le but est la lecture de ce texte qui peut du coup commencer avant son chargement complet. Personne n'a l'air convaincu, mais j'ai pu tester, et c'est très efficace dans ce contexte.
Je ne peux(veux) pas manipuler les images côté serveur car elles se trouvent sur des serveurs distants indépendants (application cross-domain).
Donc, fonctionne le mieux sur Opera, pas mal sur IE, FF en local seulement (?) et toujours pas sur Chrome. Il me reste la solution de detruire l'image (removeChild) et de la recréer (appendChild), ce qui n'est pas si simple dans mon cas.
merci quand même
BK

JPEG progressif et Chrome

JavaScript

Discussions similaires

Partager

Partager