How to reload refresh an element image in jQuery

Question

Is it possible to reload an image with an identical file name from a server using jQuery   For example  I have an image on a page  however  the physical image can change based on user actions  Note  this does not mean the file name changes  but the actual file itself   ie    User views image on default page User uploads new image Default image on page does not change I assume this is due to the file name being identical  the browser uses the cached version    Regardless of how often the code below is called  the same issue persists       myimg   attr  src     myimg jpg      In the jQuery documentation  the  load  function would be perfect if it had a default method of firing the event as opposed to binding a callback function to a successful complete load of an element   Any assistance is greatly appreciated

User · Answer

This works great  however if you reload the src multiple times  the timestamp gets concatenated to the url too  I ve modified the accepted answer to deal with that       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

User · Answer

Using     as a delimiter might be useful  My images are kept in a  hidden  folder above  www  so that only logged users are allowed access to them  For this reason I cannot use the ordinary  lt img src  somefolder 1023 jpg gt  but I send requests to the server like  lt img src  1023 gt  and it responds by sending back the image kept under name  1023    The application is used for image cropping  so after an ajax request to crop the image  it is changed as content on the server but keeps its original name  In order to see the result of the cropping  after the ajax request has been completed  the first image is removed from the DOM and a new image is inserted with the same name  lt img src  1023 gt    To avoid cashing I add to the request the  time  tag prepended with     so it becomes like  lt img src  1023 1467294764124 gt   The server automatically filters out the hash part of the request and responds correctly by sending back my image kept as  1023   Thus I always get the last version of the image without much server-side decoding

User · Answer

I may have to reload the image source several times  I found a solution with Lodash that works well for me       myimg   attr  src     split     myimg   attr  src         1  0      t       now       An existing timestamp will be truncated and replaced with a new one

User · Answer

To bypass caching and avoid adding infinite timestamps to the image url  strip the previous timestamp before adding a new one  this is how I ve done it      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

User · Answer

This could be one of the two problems you mention yourself     The server is caching the image The jQuery does not fire or at least doesn t update the attribute   To be honest  I think it s number two  Would be a lot easier if we could see some more jQuery  But for a start  try remove the attribute first  and then set it again  Just to see if that helps       myimg   removeAttr  src   attr  src     myimg jpg      Even if this works  post some code since this is not optimal  imo  -

User · Answer

Have you tried resetting the image containers html  Of course if it s the browser that is caching then this wouldn t help   function imageUploadComplete              image container   html   lt img src      newImageUrl      gt

User · Answer

I simply do this in html     lt script gt        document  load function              d   new Date                 lt    imgpreview ClientID   gt    attr  src                lt  script gt       And reload the image in code behind like this    protected void Page Load object sender  EventArgs e        if   IsPostBack                image Src     image jpg     url caming from database

User · Answer

It sounds like it s your browser caching the image  which I now notice you wrote in your question   You can force the browser to reload the image by passing an extra variable like so   d   new Date        myimg   attr  src     myimg jpg   d getTime

User · Answer

It s probably not the best way  but I ve solved this problem in the past by simply appending a timestamp to the image URL using JavaScript       myimg   attr  src     myimg jpg timestamp     new Date   getTime       Next time it loads  the timestamp is set to the current time and the URL is different  so the browser does a GET for the image instead of using the cached version

User · Answer

Some times actually solution like -      Image   attr  src       srcVal   val     amp   Math floor Math random   1000      also not refresh src properly  try out this  it worked for me -       Image   attr  src    dummy jpg        Image   attr  src       srcVal   val     amp   Math floor Math random   1000

User · Answer

with one line with no worries about hardcoding the image src into the javascript  thanks to jeerose for the ideas       myimg   attr  src       myimg   attr  src     timestamp     new Date   getTime

User · Answer

Based on  kasper Taeymans  answer   If u simply need reload image  not replace it s src with smth new   try    x000D   x000D    function     x000D    var img       img    x000D   x000D    var refreshImg   function img    x000D         the core of answer is 2 lines below x000D      var dummy     dummy    x000D      img attr  src   img attr  src   split dummy  0    dummy    new Date    getTime     x000D   x000D         remove call on production x000D      updateImgVisualizer    x000D       x000D   x000D   x000D       for display current img url in input x000D       for sandbox only  x000D    var updateImgVisualizer   function     x000D          img-url   val img attr  src     x000D       x000D   x000D       bind img reload on btn click x000D        img-reloader   click function     x000D      refreshImg img   x000D        x000D   x000D       remove call on production x000D    updateImgVisualizer    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt img id  img  src  http   dummyimage com 628x150   gt  x000D   x000D   x000D   lt p gt  x000D     lt label gt  x000D      Current url of img  x000D       lt input id  img-url  type  text  readonly style  width 500px  gt  x000D     lt  label gt  x000D   lt  p gt  x000D   x000D   lt p gt  x000D     lt button class  img-reloader  gt Refresh lt  button gt  x000D   lt  p gt  x000D   x000D   x000D

[jquery] How to reload/refresh an element(image) in jQuery

Examples related to jquery