web-dev-qa-db-fra.com

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

Est-il possible de recharger une image avec un nom de fichier identique à partir d'un serveur utilisant jQuery?

Par exemple, j'ai une image sur une page. Cependant, l'image physique peut changer en fonction des actions de l'utilisateur. Notez que cela ne signifie pas que le nom du fichier change, mais le fichier lui-même.

c'est à dire:

  • L'utilisateur affiche l'image sur la page par défaut
  • L'utilisateur télécharge une nouvelle image
  • L'image par défaut sur la page ne change pas (je suppose que cela est dû au fait que le nom du fichier est identique, le navigateur utilise la version en cache)

Quelle que soit la fréquence à laquelle le code ci-dessous est appelé, le même problème persiste.

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

Dans la documentation de jQuery, la fonction "load" serait parfaite si elle utilisait une méthode par défaut pour déclencher l'événement, par opposition à la liaison d'une fonction de rappel à un chargement réussi/complet d'un élément.

Toute aide est grandement appréciée.

jquery
242
Alexis Abril

On dirait que c'est votre navigateur qui met en cache l'image (ce que je remarque maintenant que vous avez écrit dans votre question). Vous pouvez forcer le navigateur à recharger l'image en transmettant une variable supplémentaire comme ceci:

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

Ce n'est probablement pas la meilleure solution, mais j'ai déjà résolu ce problème en ajoutant simplement un horodatage à l'URL de l'image à l'aide de JavaScript:

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

Lors du prochain chargement, l'horodatage est défini sur l'heure actuelle et l'URL est différente. Le navigateur effectue donc une opération GET pour l'image au lieu d'utiliser la version en cache.

52
Kaleb Brasee

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

  1. Le serveur met en cache l'image
  2. JQuery ne se déclenche pas ou du 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 de supprimer d'abord l'attribut, puis définissez-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 :-)

24
Kordonme

avec une ligne sans souci de coder en dur l'image src dans le javascript (merci à jeerose pour les idées:

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

Pour contourner la mise en cache et éviter d’ajouter des horodatages infinis à l’URL de l’image, effacez l’horodatage précédent avant d’en ajouter un nouveau, c’est ainsi que 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);
}
9
sEver

Cela fonctionne très bien! Toutefois, si vous rechargez le code src plusieurs fois, l'horodatage est également concaténé à l'URL. J'ai modifié la réponse acceptée pour traiter cela.

$('#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());
});
6
kasper Taeymans

Parfois, une 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));
2
Kulbhushan Chaskar

Avez-vous essayé de réinitialiser les conteneurs d’images HTML. Bien sûr, si c'est le navigateur qui met en cache, cela ne changera rien.

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

Utiliser "#" comme séparateur pourrait ê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 le <img src=/somefolder/1023.jpg> ordinaire, mais j'envoie des requêtes au serveur comme <img src=?1023>. Celui-ci répond en renvoyant l'image conservée sous le nom '1023'.

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

Pour éviter d'encaisser, j'ajoute à la demande la balise "time" précédée de "#" afin qu'elle devienne <img src=?1023#1467294764124>. Le serveur filtre automatiquement la partie de hachage de la demande et répond correctement en renvoyant mon image conservée en tant que '1023'. Ainsi, je reçois toujours la dernière version de l'image sans beaucoup de décodage côté serveur.

1
user3506298

Il se peut que je doive recharger la source de l'image plusieurs fois. J'ai trouvé une solution avec Lodash cela fonctionne bien pour moi:

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

Un horodatage existant sera tronqué et remplacé par un nouveau.

0
slp