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

Question

Est-il possible de recharger une image avec un nom de fichier identique depuis un serveur en utilisant jQuery ?

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

ie :

• L'utilisateur visualise l'image sur la page par défaut
• L'utilisateur télécharge une nouvelle image
• L'image par défaut de 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).

Quel que soit le nombre de fois où 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 disposait d'une méthode par défaut pour déclencher l'événement, plutôt que de lier une fonction de rappel au chargement réussi/complet d'un élément.

Toute aide est grandement appréciée.

Answer 1

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

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

Answer 2

Ce n'est probablement pas la meilleure solution, mais j'ai résolu ce problème par le passé 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 remplacé par l'heure actuelle et l'URL est différente, de sorte que le navigateur effectue une requête GET pour l'image au lieu d'utiliser la version en cache.

Answer 3

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

1. Le serveur met l'image en cache
2. Le 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 on pouvait voir un peu plus de jQuery. Mais pour commencer, essayez d'abord d'enlever l'attribut, puis de le remettre. Juste pour voir si ça aide :

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

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

Answer 4

En une seule ligne, sans avoir à se soucier de coder en dur le src de l'image dans le javascript (merci à jeerose pour l'idée) :

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

Answer 5

Pour contourner la mise en cache y évitez d'ajouter des timestamps infinis à l'url de l'image, supprimez le timestamp précédent avant d'en ajouter un nouveau, c'est comme ça 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);
}