JQuery – Recharger une image

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.

Aymeric DERBOIS

J'ai 27 ans et je suis développeur. Je travail la plupart du temps sur des techno web, mais pas que. Étant à l'affût des nouveautés, j'adore découvrir tout et n'importe quoi dans l'informatique. Je suis amoureux de CakePHP et j'utilise au quotidien Django. Je suis très ouvert d'esprit :). J'aime bien utiliser AngularJS aussi de temps à autre pour faire du front. Au quotidien j'utilise Fedora/Ubuntu pour le desktop et CentOS pour mes serveurs. Par ailleurs je maîtrise le C/C++/Python/PHP/...

More Posts - Website

Follow Me: