Comment rafraîchir un élément(image) en jQuery

Il sonne comme il est de votre cache de navigateur de l'image (qui, je le remarque maintenant que vous avez écrit dans votre question). Vous pouvez forcer le navigateur à recharger l'image en passant une variable supplémentaire comme suit:

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());

Cela pourrait être l'un des deux problèmes que vous mentionnez vous-même.

1. Le serveur de mise en cache de l'image
2. Le jQuery ne se déclenche pas ou au moins ne pas mettre à jour l'attribut

Pour être honnête, je pense que c'est le numéro deux. Serait beaucoup plus facile si nous pourrions voir un peu plus jQuery. Mais pour commencer, essayez de supprimer l'attribut d'abord, puis le configurer à nouveau. Juste pour voir si cela aide:

$("#myimg").removeAttr("src").attr("src", "/myimg.jpg");

Même si cela fonctionne, poster du code, puisque ce n'est pas optimal, l'omi 🙂

De contourner la mise en cache et éviter d'ajouter infini les horodatages pour l'url de l'image, la bande de la précédente timestamp avant d'en ajouter une nouvelle, c'est la façon dont je l'ai fait.

//refresh the image every 60seconds
var xyro_refresh_timer = setInterval(xyro_refresh_function, 60000);

function xyro_refresh_function(){
//refreshes an image with a .xyro_refresh class regardless of caching
    //get the src attribute
    source = jQuery(".xyro_refresh").attr("src");
    //remove previously added timestamps
    source = source.split("?", 1);//turns "image.jpg?timestamp=1234" into "image.jpg" avoiding infinitely adding new timestamps
    //prep new src attribute by adding a timestamp
    new_source = source + "?timestamp="  + new Date().getTime();
    //alert(new_source); //you may want to alert that during developement to see if you're getting what you wanted
    //set the new src attribute
    jQuery(".xyro_refresh").attr("src", new_source);
}

Avez-vous essayé de réinitialiser l'image des conteneurs html. Bien sûr, si c'est le navigateur qui est de la mise en cache alors ce ne serait pas aider.

function imageUploadComplete () {
    $("#image_container").html("<img src='" + newImageUrl + "'>");
}

À l'aide de "#" comme un délimiteur peut être utile

Mes images sont conservées dans un "caché" dossier "www" de sorte que seuls les utilisateurs enregistrés sont autorisés à accéder à eux. Pour cette raison, je ne peux pas utiliser l'ordinaire <img src=/somefolder/1023.jpg> mais je envoyer des requêtes vers le serveur comme <img src=?1023> et il répond en renvoyant l'image gardé sous le nom de "1023'.

L'application est utilisée pour le recadrage de l'image, donc, après une requête ajax pour recadrer l'image, il est modifié comme contenu sur le serveur, mais conserve son nom d'origine. Afin de voir le résultat de la délibération, après la requête ajax a été achevée, la première image est supprimée de la DOM et une nouvelle image est insérée avec le même nom <img src=?1023>.

Pour éviter d'encaissement-je ajouter de la demande, le "temps" de la balise préfixé par "#", de sorte qu'il devient comme <img src=?1023#1467294764124>. Le serveur filtre automatiquement la valeur de hachage de la partie de la demande et répond correctement par l'envoi de mon image conservée comme "1023'. Donc je suis toujours la dernière version de l'image sans trop de serveur-côté de décodage.

Basé sur @kasper Taeymans réponse.

Si u ont simplement besoin de recharger l'image (pas de remplacer la src avec qch nouveau), essayez:

JS:

$(function() {
  var img = $('#img');

  var refreshImg = function(img) {
    //the core of answer is 2 lines below
    var dummy = '?dummy=';
    img.attr('src', img.attr('src').split(dummy)[0] + dummy + (new Date()).getTime());

    //remove call on production
    updateImgVisualizer();
  };


  //for display current img url in input
  //for sandbox only!
  var updateImgVisualizer = function() {
    $('#img-url').val(img.attr('src'));
  };

  //bind img reload on btn click
  $('.img-reloader').click(function() {
    refreshImg(img);
  });

  //remove call on production
  updateImgVisualizer();
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="img" src="http://dummyimage.com/628x150/">


<p>
  <label>
    Current url of img:
    <input id="img-url" type="text" readonly style="width:500px">
  </label>
</p>

<p>
  <button class="img-reloader">Refresh</button>
</p>