JPEG progressif et Chrome

Version imprimable

03/12/2012, 11h10
Billy KiT

JPEG progressif et Chrome
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:

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

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

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

Code:

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 ...
03/12/2012, 11h42
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
03/12/2012, 12h01
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 ...
03/12/2012, 12h44
Billy KiT

... ben si, quand c'est par exemple pour lire des vieux documents d'archives où c'est écrit tout petit ... :mouarf: mais bon, c'est pas la question
(1Mo = env. 3 Mpixels pas trop altéré = 2000 x 1500, c'est pas énorme non plus)
03/12/2012, 12h47
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 ..
03/12/2012, 13h56
Bovino
Ensuite, je comprends pas trop ton problème... Le but, c'est quand même d'afficher les images non, pas le chargement progressif... :koi:
Ce qui explique probablement le comportement de Chrome.

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

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

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:

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

03/12/2012, 16h07
SylvainPV

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...
03/12/2012, 16h25
Billy KiT

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
03/12/2012, 18h56
SylvainPV

Dans ce cas tu peux peut-être essyaer de supprimer et recréer le tag <img> en Javascript
03/12/2012, 19h48
Billy KiT

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. :cry:
03/12/2012, 19h59
NoSmoking

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 ...
03/12/2012, 20h03
Invité

si ça ne fonctionne pas uniquement avec chrome il doit à tous les coups s'agir d'un bug
05/12/2012, 17h21
lightbulb

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....
06/12/2012, 01h31
Billy KiT

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