Bonjour à tous et toutes,
Je dois réaliser, pour intégration à un framework PHP, un module de gestion de librairies d'images en Ajax.
Celui-ci permet de naviguer entre les librairies, de voir les images qu'elles contiennent et d'en ajouter ou modifier.
La seule contrainte étant que ce module doit être exclusivement en Ajax.
Aucun problème pour la récupération des images et l'affichage des librairies.
L'upload fonctionne lui aussi (en utilisant la nouvelle File Api HTML5).
Mais par contre, je rencontre un problème dans le cas d'une modification d'image.
En effet, après upload, je souhaite rafraichir l'image à l'écran, mais c'est toujours celle prise à partir du cache, et non la nouvelle image modifiée, qui s'affiche...classique me direz-vous !!
mais le problème, c'est que je ne peux pas ici utiliser la méthode classique consistant à rajouter une variable unique à l'URL de l'image (par exemple img.src = 'nom_image?timestamp').
Déjà parce que cette méthode ne recharge pas vraiment l'image, elle crée juste une autre instance dans le cache, associée à la nouvelle URL.
Donc, si jamais je ne passe plus '?timestamp' dans l'URL, ce sera de nouveau l'ancienne image qui s'affichera.
Ensuite car, bien sur, je pourrais faire en sorte de systématiquement utiliser cette méthode sur toutes les images affichées pour forcer le navigateur à toujours recharger l'image...mais ce n'est pas une bonne idée car, imaginons plusieurs librairies comportant de nombreuses images très lourdes : à chaque fois qu'on change de librairie, il faudra recharger toutes les images alors que celles-ci n'ont pas été modifiées (vive la conso de bande passante et les temps de chargements
)
Bref, il faudrait vraiment que l'image se recharge après modification, et seulement dans ce cas là !!
j'ai aussi pensé aux Etags-header pour ça.
j'ai utilisé un module firefox pour 'sniffer' les header et regarder l'évolution des Etags avant/après upload.
Après upload, l'Etag de l'image rechargée est bien différent de celui de l'image précédemment affichée...et malgré tout, l'image est quand même chargée à partir du cache
Du moment que l'Etag est différent, le navigateur ne devrait-il pas recharger l'image automatiquement ?
J'ai essayé de rechercher sur le net, mais je n'ai rien trouvé qui explique comment les paramétrer et les utiliser dans mon cas (la seule chose que j'ai trouvé, c'est comment les désactiver via htaccess).
bref, je désespère un peu de trouver une solution.
Y a-t-il un moyen de faire ça en javascript ? Et si oui, comment ?
En vous remerciant par avance pour votre aide
Cordialement,
Olivier
P.S. vous ne trouvez pas que c'est quand même terrible que les developpeurs de navigateur n'aient pas pensé à mettre en place, nativement, une méthode javascript simple pour forcer à outrepasser le cache pour recharger une image, et de devoir faire des 'bidouilles' pour ça
(surtout que c'est un problème qui ne date pas d'hier, et surtout avec HTML5 qui permet de faire de l'upload et de la retouche d'images en javascript) !!
Je dois réaliser, pour intégration à un framework PHP, un module de gestion de librairies d'images en Ajax.
Celui-ci permet de naviguer entre les librairies, de voir les images qu'elles contiennent et d'en ajouter ou modifier.
La seule contrainte étant que ce module doit être exclusivement en Ajax.
Aucun problème pour la récupération des images et l'affichage des librairies.
L'upload fonctionne lui aussi (en utilisant la nouvelle File Api HTML5).
Mais par contre, je rencontre un problème dans le cas d'une modification d'image.
En effet, après upload, je souhaite rafraichir l'image à l'écran, mais c'est toujours celle prise à partir du cache, et non la nouvelle image modifiée, qui s'affiche...classique me direz-vous !!
mais le problème, c'est que je ne peux pas ici utiliser la méthode classique consistant à rajouter une variable unique à l'URL de l'image (par exemple img.src = 'nom_image?timestamp').
Déjà parce que cette méthode ne recharge pas vraiment l'image, elle crée juste une autre instance dans le cache, associée à la nouvelle URL.
Donc, si jamais je ne passe plus '?timestamp' dans l'URL, ce sera de nouveau l'ancienne image qui s'affichera.
Ensuite car, bien sur, je pourrais faire en sorte de systématiquement utiliser cette méthode sur toutes les images affichées pour forcer le navigateur à toujours recharger l'image...mais ce n'est pas une bonne idée car, imaginons plusieurs librairies comportant de nombreuses images très lourdes : à chaque fois qu'on change de librairie, il faudra recharger toutes les images alors que celles-ci n'ont pas été modifiées (vive la conso de bande passante et les temps de chargements
)Bref, il faudrait vraiment que l'image se recharge après modification, et seulement dans ce cas là !!
j'ai aussi pensé aux Etags-header pour ça.
j'ai utilisé un module firefox pour 'sniffer' les header et regarder l'évolution des Etags avant/après upload.
Après upload, l'Etag de l'image rechargée est bien différent de celui de l'image précédemment affichée...et malgré tout, l'image est quand même chargée à partir du cache
Du moment que l'Etag est différent, le navigateur ne devrait-il pas recharger l'image automatiquement ?
J'ai essayé de rechercher sur le net, mais je n'ai rien trouvé qui explique comment les paramétrer et les utiliser dans mon cas (la seule chose que j'ai trouvé, c'est comment les désactiver via htaccess).
bref, je désespère un peu de trouver une solution.
Y a-t-il un moyen de faire ça en javascript ? Et si oui, comment ?
En vous remerciant par avance pour votre aide
Cordialement,
Olivier
P.S. vous ne trouvez pas que c'est quand même terrible que les developpeurs de navigateur n'aient pas pensé à mettre en place, nativement, une méthode javascript simple pour forcer à outrepasser le cache pour recharger une image, et de devoir faire des 'bidouilles' pour ça
(surtout que c'est un problème qui ne date pas d'hier, et surtout avec HTML5 qui permet de faire de l'upload et de la retouche d'images en javascript) !!