Pour recharger une image (si elle a été modifiée suite à un appel ajax par exemple), il suffit juste de quelques lignes de code.
Exemple basique
<!-- L'image à recharger --> <img src="/img/monimage.jpg" id="my-img">
var img = $('#my-img'); var src = img.attr("src"); img.attr("src", src + "?burn=" + (new Date()).getTime());
Le fait d’ajouter un paramètre GET à l’image va forcer le navigateur à recharger l’image.
Exemple plus gros
Voici un exemple un peu plus concret. Vous avez une image qui est affichée avec un lien en dessous qui permet permet de faire un traitement sur l’image
<!-- L'image à recharger --> <img src="/img/monimage.jpg" id="my-img"> <br> <a href="/rotate-picture?img=monimage.jpg?burn=" id="rotate-picture">Tourner l'image</a>
On ajoute déjà `burn` en GET pour se simplifier la vie.
On va considérer dans cette exemple que l’url `/rotate-picture?img=monimage.jpg` va effectuer une rotation sur `/img/monimage.jpg`.
Une fois la rotation faite, deux possibilités :
- C’est une requête ajax, on renvoie du JSON
- Sinon on redirige vers la page précédente
Avec Django, j’aime bien faire ça de la manière suivante :
if request.is_ajax(): return HttpResponse(json.dumps({'status': 'OK'}), content_type="application/json") else: return HttpResponseRedirect(request.META.get('HTTP_REFERER', None))
Sans javascript, lorsque l’on clique sur le lien, la page se recharge donc avec l’image qui a subit une rotation.
Ajoutons un peu de javascript pour éviter d’avoir à recharger l’ensemble de la page
$('#rotate-picture').on('click', function() { $.get($(this).attr('href'), function() { $('#my-img').each(function() { var reg = /burn=\d+/gi; var src = $(this).attr("src").replace(reg, "burn=" + (new Date()).getTime()); $(this).attr("src", src); }); }); return false; });
La petite différence est que si il y a déjà une valeur GET `burn` (lorsque l’on a déjà cliqué une fois sur le lien) on met à jour la valeur, d’ou la regexp.
Normalement à chaque fois que vous cliquez sur le lien, seul l’image se recharge. Pour simplifier le code javascript, il n’y a pas de vérification du retour JSON, chose qu’il faut normalement faire.
Cela permet de proposer des features sympas sur son site (rotation d’image, application de filtre, …) avec des traitements en backend qui sont affiché directement sans avoir à recharger la page.