Comment recharger / actualiser un élément (image) dans jQuery

Ce n'est probablement pas le meilleur moyen, mais j'ai résolu ce problème par le passé en ajoutant simplement un horodatage à l'URL de l'image en utilisant JavaScript:

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

La prochaine fois qu'il se charge, l'horodatage est défini sur l'heure actuelle et l'URL est différente, de sorte que le navigateur effectue un GET pour l'image au lieu d'utiliser la version mise en cache.

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

1. le serveur met en cache l'image
2. le jQuery ne se déclenche pas ou au moins ne met pas à jour l'attribut

Pour être honnête, je pense que c'est le numéro deux. Ce serait beaucoup plus facile si nous pouvions voir plus de jQuery. Mais pour commencer, essayez d'abord de supprimer l'attribut, puis réglez-le à nouveau. Juste pour voir si cela aide:

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

Même si cela fonctionne, postez du code car ce n'est pas optimal, imo: -)

Avec une ligne sans soucis de codage en dur de l'image src dans le javascript (merci à jeerose pour les idées:

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

Pour contourner la mise en cache et évitez d'ajouter des horodatages infinis à l'url de l'image, supprimez l'horodatage précédent avant d'en ajouter un nouveau, voici comment 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);
}

Cela fonctionne très bien! cependant, si vous rechargez Le src plusieurs fois, l'horodatage est également concaténé à l'url. J'ai modifié la réponse acceptée pour y faire face.

$('#image_reload_button').on('click', function () {
    var img = $('#your_image_selector');
    var src = img.attr('src');
    var i = src.indexOf('?dummy=');
    src = i != -1 ? src.substring(0, i) : src;

    var d = new Date();
    img.attr('src', src + '?dummy=' + d.getTime());
});

Avez-vous essayé de réinitialiser les conteneurs d'images html. Bien sûr, si c'est le navigateur qui met en cache, cela n'aiderait pas.

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

Certaines Fois en fait la solution comme -

$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

Pas non plus actualiser src correctement, essayez ceci, cela a fonctionné pour moi- >

$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

Utiliser " # " comme délimiteur peut être utile

Mes images sont conservées dans un dossier "caché" au-dessus de" www " afin que seuls les utilisateurs connectés puissent y accéder. Pour cette raison, Je ne peux pas utiliser l'ordinaire <img src=/somefolder/1023.jpg> mais j'envoie des requêtes au serveur comme <img src=?1023> et il répond en renvoyant l'image conservée sous le nom '1023'.

L'application est utilisée pour le recadrage d'image, donc après une requête ajax pour recadrer l'image, elle est modifiée en tant que contenu sur le serveur mais conserve son nom d'origine. Dans pour voir le résultat du recadrage, une fois la requête ajax terminée, la première image est supprimée du DOM et une nouvelle image est insérée avec le même nom <img src=?1023>.

Pour éviter l'encaissement, j'ajoute à la requête la balise "time" préfixée par " # " pour qu'elle devienne comme <img src=?1023#1467294764124>. Le serveur filtre automatiquement la partie de hachage de la requête et répond correctement en renvoyant mon image conservée comme '1023'. Ainsi, j'obtiens toujours la dernière version de l'image sans trop de côté serveur décoder.

Je dois peut-être recharger la source de l'image plusieurs fois. J'ai trouvé une solution avec Lodash qui fonctionne bien pour moi:

$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());

Existant horodatage sera tronqué et remplacé par un nouveau.

Basé sur la réponse de @kasper Taeymans.

Si vous avez simplement besoin de recharger l'image (Pas de remplacer src par smth new), essayez:

$(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();
});

<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>

Je le fais simplement en html:

<script>
    $(document).load(function () {
        d = new Date();
        $('#<%= imgpreview.ClientID %>').attr('src','');
    });
</script>

Et rechargez l'image dans le code derrière comme ceci:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        image.Src = "/image.jpg"; //url caming from database
    }

}