Refresh image with a new one at the same url

Question

I am accessing a link on my site that will provide a new image each time it is accessed   The issue I am running into is that if I try to load the image in the background and then update the one on the page  the image doesn t change--though it is updated when I reload the page   var newImage   new Image    newImage src    http   localhost image jpg    function updateImage     if newImage complete        document getElementById  theText   src   newImage src      newImage   new Image        number        newImage src    http   localhost image id image jpg time     new Date           setTimeout updateImage  1000       Headers as FireFox sees them   HTTP 1 x 200 OK Cache-Control  no-cache  must-revalidate Pragma  no-cache Transfer-Encoding  chunked Content-Type  image jpeg Expires  Fri  30 Oct 1998 14 19 41 GMT Server  Microsoft-HTTPAPI 1 0 Date  Thu  02 Jul 2009 23 06 04 GMT   I need to force a refresh of just that image on the page  Any ideas

User · Answer

Here s my solution  It s very simple  The frame scheduling could be better    lt  doctype html gt   lt html gt       lt head gt           lt meta charset  utf-8  gt                 lt title gt Image Refresh lt  title gt       lt  head gt        lt body gt        lt  -- Get the initial image  -- gt       lt img id  frame  src  frame jpg  gt        lt script gt                     Use an off-screen image to load the next frame          var img   new Image                When it is loaded            img addEventListener  load   function                     Set the on-screen image to the same source  This should be instant because                it is already loaded              document getElementById  frame   src   img src                  Schedule loading the next frame              setTimeout function                     img src    frame jpg      new Date  getTime                   1000 15      15 FPS  more or less                         Start the loading process          img src    frame jpg      new Date  getTime         lt  script gt       lt  body gt   lt  html gt

User · Answer

After creating the new image  are you removing the old image from the DOM and replacing it with the new one   You could be grabbing new images every updateImage call  but not adding them to the page   There are a number of ways to do it  Something like this would work   function updateImage         var image   document getElementById  theText        if image complete            var new image   new Image              set up the new image         new image id    theText           new image src   image src                        insert new image and remove old         image parentNode insertBefore new image image           image parentNode removeChild image              setTimeout updateImage  1000       After getting that working  if there are still problems it is probably a caching issue like the other answers talk about

User · Answer

I ve seen a lot of variation in answers for how to do this  so I thought I d summarize them here  plus add a 4th method of my own invention       1   Add a unique cache-busting query parameter to the URL  such as   newImage src    image jpg t     new Date   getTime      Pros  100  reliable  quick  amp  easy to understand and implement   Cons  Bypasses caching altogether  meaning unnecessary delays and bandwidth use whenever the image doesn t change between views  Will potentially fill browser cache  and any intermediate caches  with many  many copies of exactly the same image  Also  requires modifying image URL   When to use  Use when image is constantly changing  such as for a live webcam feed   If you use this method  make sure to serve the images themselves with Cache-control  no-cache HTTP headers      Often this can be set up using a  htaccess file    Otherwise you ll be progressively filling caches up with old versions of the image      2  Add query parameter to the URL that changes only when the file does  e g    echo   lt img src  image jpg m     filemtime  image jpg        gt       That s PHP server-side code  but the important point here is just that a  m  file last-modified time  querystring is appended to the filename    Pros  100  reliable  quick  amp  easy to understand and implement  and preserves caching advantages perfectly   Cons  Requires modifying the image URL   Also  a little more work for the server - it has to get access to the file-last-modified time   Also  requires server-side information  so not suitable for a purely client-side-only solution to check for a refreshed image    When to use  When you want to cache images  but may need to update them at the server end from time to time without changing the filename itself  AND when you can easily ensure that the correct querystring is added to every image instance in your HTML      3  Serve your images with the header Cache-control  max-age 0  must-revalidate  and add a unique memcache-busting fragment identifier to the URL  such as   newImage src    image jpg     new Date   getTime      The idea here is that the cache-control header puts images in the browser cache  but immediately markes them stale  so that and every time they are re-displayed the browser must check with the server to see if they ve changed   This ensures that the browser s HTTP cache always returns the latest copy of the image   However  browsers will often re-use an in-memory copy of an image if they have one  and not even check their HTTP cache in that case   To prevent this  a fragment identifier is used   Comparison of in-memory image src s includes the fragment identifier  but it gets stripped of before querying the HTTP cache   So  e g   image jpg A and image jpg B might both be displayed from the image jpg entry in the browser s HTTP cache  but image jpg B would never be displayed using in-memory retained image data from when image jpg A was last displayed    Pros  Makes proper use of HTTP caching mechanisms  and uses cached images if they haven t changed   Works for servers that choke on a querystring added to a static image URL  since servers never see fragment identifiers - they re for the browsers  own use only    Cons  Relies on somewhat dubious  or at least poorly documented  behaviour of browsers  in regard to images with fragment identifiers in their URLs  However  I ve tested this successfully in FF27  Chrome33  and IE11    Does still send a revalidation request to the server for every image view  which may be overkill if images only change rarely and or latency is a big issue  since you need to wait for the revalidation response even when the cached image is still good    Requires modifying image URLs   When to use  Use when images may change frequently  or need to be refreshed intermittently by the client without server-side script involvement  but where you still want the advantage of caching   For example  polling a live webcam that updates an image irregularly every few minutes   Alternatively  use instead of  1  or  2  if your server doesn t allow querystrings on static image URLs      4  Forcibly refresh a particular image using Javascript  by first loading it into a hidden  lt iframe gt  and then calling location reload true  on the iframe s contentWindow   The steps are    Load the image to be refreshed into a hidden iframe   This is just a setup step - it can be done long in advance the actual refresh  if desired   It doesn t even matter if the image fails to load at this stage  Once that s done  blank out all copies of that image on your page s  or anywhere in any DOM nodes  even off-page ones stored in javascript variables    This is necessary because the browser may otherwise display the image from a stale in-memory copy  IE11 especially does this    You need to ensure all in-memory copies are cleared  before refreshing the HTTP cache   If other javascript code is running asynchronously  you may also need to prevent that code from creating new copies of the to-be-refreshed image in the meantime  Call iframe contentWindow location reload true    The true forces a cache bypass  reloading directly from the server and overwriting the existing cached copy  Once it s finished re-loading  restore the blanked images   They should now display the fresh version from the server    For same-domain images  you can load the image into the iframe directly   For cross-domain images  you have to instead load a HTML page from your domain that contains the image in an  lt img gt  tag  otherwise you ll get an  Access Denied  error when trying to call iframe contentWindow reload        Pros  Works just like the image reload   function you wish the DOM had  Allows images to by cached normally  even with in-the-future expiry dates if you want them  thus avoiding frequent revalidation    Allows you to refresh a particular image without altering the URLs for that image on the current page  or on any other pages  using only client-side code   Cons  Relies on Javascript   Not 100  guaranteed to work properly in every browser  I ve tested this successfully in FF27  Chrome33  and IE11 though    Very complicated relative to the other methods   When to use  When you have a collection of basically static images that you d like cached  but you still need to be able to update them occasionally and get immediate visual feedback that the update took place    Especially when just refreshing the whole browser page wouldn t work  as in some web apps built on AJAX for example    And when methods  1 - 3  aren t feasible because  for whatever reason  you can t change all the URLs that might potentially display the image you need to have updated    Note that using those 3 methods the image will be refreshed  but if another page then tries to displays that image without the appropriate querystring or fragment identifier  it may show an older version instead    The details of implementing this in a fairy robust and flexible manner are given below   Let s assume your website contains a blank 1x1 pixel  gif at the URL path  img 1x1blank gif  and also has the following one-line PHP script  only required for applying forced refresh to cross-domain images  and can be rewritten in any server-side scripting language  of course  at the URL path  echoimg php    lt img src   lt   htmlspecialchars    GET  src   ENT COMPAT ENT HTML5  UTF-8    gt   gt    Then  here s a realistic implementation of how you might do all this in Javascript   It looks a bit complicated  but there s a lot of comments  and the important function is just forceImgReload   - the first two just blank and un-blank images  and should be designed to work efficiently with your own HTML  so code them as works best for you  much of the complications in them may be unnecessary for your website      This function should blank all images that have a matching src  by changing their src property to  img 1x1blank gif           You should code the actual contents of this function according to your page design  and what images there are on them             Optionally it may return an array  or other collection or data structure  of those images affected     This can be used by imgReloadRestore   to restore them later  if that s an efficient way of doing it  otherwise  you don t need to return anything      NOTE that the src argument here is just passed on from forceImgReload    and MAY be a relative URI     However  be aware that if you re reading the src property of an  lt img gt  DOM object  you ll always get back a fully-qualified URI     even if the src attribute was a relative one in the original HTML   So watch out if trying to compare the two     NOTE that if your page design makes it more efficient to obtain  say  an image id or list of ids  of identical images   first   and only then get the image src     you can pass this id or list data to forceImgReload   along with  or instead of  a src argument  just add an extra or replacement parameter for this information to    this function  to imgReloadRestore    to forceImgReload    and to the anonymous function returned by forceImgReload    and make it overwrite the earlier parameter variable from forceImgReload   if truthy   as appropriate  function imgReloadBlank src               Everything here is provisional on the way the pages are designed  and what images they contain  what follows is for example purposes only             For really simple pages containing just a single image that s always the one being refreshed  this function could be as simple as just the one line             document getElementById  myImage   src     img 1x1blank gif      var blankList             fullSrc      Fully qualified  absolute  src - i e  prepend protocol  server domain  and path if not present in src           imgs  img  i     for each     window accessible from this one  i e  this window  and child frames iframes  the parent window  anything opened via window open    and anything recursively reachable from there                get list of matching images      imgs   theWindow document body getElementsByTagName  img        for  i   imgs length  i--   if   img   imgs i   src   fullSrc      could instead use body querySelectorAll    to check both tag name and src attribute  which would probably be more efficient  where supported             img src     img 1x1blank gif       blank them       blankList push img                 optionally  save list of blanked images to make restoring easy later on              for each     img DOM node held only by javascript  for example in any image-caching script     if  img src   fullSrc          img src     img 1x1blank gif        do the same as for on-page images      blankList push img                   If necessary  do something here that tells all accessible windows not to create any  new  images with src   fullSrc  until further notice              or perhaps to create them initially blank instead and add them to blankList              For example  you might have  say  a global object window top blankedSrces as a propery of your topmost window  initially set        Then you could do                            var bs   window top blankedSrces                 if  bs hasOwnProperty src   bs src     else bs src    1                        And before creating a new image using javascript  you d first ensure that  blankedSrces hasOwnProperty src   was false               Note that incrementing a counter here rather than just setting a flag allows for the possibility that multiple forced-reloads of the same image are underway at once  or are overlapping     return blankList       optional - only if using blankList for restoring back the blanked images   This just gets passed in to imgReloadRestore    it isn t used otherwise           This function restores all blanked images  that were blanked out by imgReloadBlank src  for the matching src argument           You should code the actual contents of this function according to your page design  and what images there are on them  as well as how if images are dimensioned  etc          function imgReloadRestore src blankList imgDim loadError                Everything here is provisional on the way the pages are designed  and what images they contain  what follows is for example purposes only             For really simple pages containing just a single image that s always the one being refreshed  this function could be as simple as just the one line             document getElementById  myImage   src   src              if in imgReloadBlank   you did something to tell all accessible windows not to create any  new  images with src   fullSrc until further notice  retract that setting now             For example  if you used the global object window top blankedSrces as described there  then you could do                            var bs   window top blankedSrces                 if  bs hasOwnProperty src  amp  amp --bs src   return  else delete bs src       return here means don t restore until ALL forced reloads complete     var i  img  width   imgDim amp  amp imgDim 0   height   imgDim amp  amp imgDim 1     if  width  width     px     if  height  height     px      if  loadError      If you want  do something about an image that couldn t load  e g  src     img brokenImg jpg   or alert  Couldn t refresh image from server               If you saved  amp  returned blankList in imgReloadBlank    you can just use this to restore     for  i   blankList length  i--            img   blankList i   src   src      if  width  img style width   width      if  height  img style height   height               Force an image to be reloaded from the server  bypassing refreshing the cache     due to limitations of the browser API  this actually requires TWO load attempts - an initial load into a hidden iframe  and then a call to iframe contentWindow location reload true      If image is from a different domain  i e  cross-domain restrictions are in effect  you must set isCrossDomain   true  or the script will crash     imgDim is a 2-element array containing the image x and y dimensions  or it may be omitted or null  it can be used to set a new image size at the same time the image is updated  if applicable     if  twostage  is true  the first load will occur immediately  and the return value will be a function    that takes a boolean parameter  true to proceed with the 2nd load  including the blank-and-reload procedure   false to cancel  and an optional updated imgDim     This allows you to do the first load early    for example during an upload  to the server  of the image you want to  then  refresh  function forceImgReload src  isCrossDomain  imgDim  twostage      var blankList  step   0                                    step  0 - started initial load  1 - wait before proceeding  twostage mode only   2 - started forced reload  3 - cancelled       iframe   window document createElement  iframe         Hidden iframe  in which to perform the load reload        loadCallback   function e                              Callback function  called after iframe load reload completes  or fails                                                                Will be called TWICE unless twostage-mode process is cancelled   Once after load  once after reload           if   step      initial load just completed   Note that it doesn t actually matter if this load succeeded or not                      if  twostage  step   1      wait for twostage-mode proceed or cancel  don t do anything else just yet           else   step   2  blankList   imgReloadBlank src   iframe contentWindow location reload true         initiate forced-reload                   else if  step   2       forced re-load is done                     imgReloadRestore src blankList imgDim  e  window event  type    error          last parameter checks whether loadCallback was called from the  load  or the  error  event            if  iframe parentNode  iframe parentNode removeChild iframe                       iframe style display    none     window parent document body appendChild iframe         NOTE  if this is done AFTER setting src  Firefox MAY fail to fire the load event    iframe addEventListener  load  loadCallback false     iframe addEventListener  error  loadCallback false     iframe src    isCrossDomain     echoimg php src   encodeURIComponent src    src       If src is cross-domain  script will crash unless we embed the image in a same-domain html page  using server-side script       return  twostage       function proceed dim                  if   twostage  return          twostage   false          if  proceed                      imgDim    dim  imgDim       overwrite imgDim passed in to forceImgReload   - just in case you know the correct img dimensions now  but didn t when forceImgReload   was called            if  step   1    step   2  blankList   imgReloadBlank src   iframe contentWindow location reload true                       else                     step   3            if  iframe contentWindow stop  iframe contentWindow stop              if  iframe parentNode  iframe parentNode removeChild iframe                           null       Then  to force a refresh of an image located on the same domain as your page  you can just do   forceImgReload  myimage jpg      To refresh an image from somewhere else  cross-domain    forceImgReload  http   someother server com someimage jpg   true     A more advanced application might be to reload an image after uploading a new version to your server  preparing the initial stage of the reload process simultaneous with the upload  to minimize the visible reload delay to the user   If you re doing the upload via AJAX  and the server is returning a very simple JSON array  success  width  height  then your code might look something like this      fileForm is a reference to the form that has a the  lt input typ  file  gt  on it  for uploading     serverURL is the url at which the uploaded image will be accessible from  once uploaded     The response from uploadImageToServer php is a JSON array  success  width  height    A boolean and two ints   function uploadAndRefreshCache fileForm  serverURL      var xhr   new XMLHttpRequest          proceedWithImageRefresh   forceImgReload serverURL  false  null  true     xhr addEventListener  load   function    var arr   JSON parse xhr responseText   if    arr amp  amp arr 0      proceedWithImageRefresh false   doSomethingOnUploadFailure         else   proceedWithImageRefresh true  arr 1  ar 2     doSomethingOnUploadSuccess              xhr addEventListener  error   function    proceedWithImageRefresh false   doSomethingOnUploadError             xhr addEventListener  abort   function    proceedWithImageRefresh false   doSomethingOnUploadAborted                add additional event listener s  to track upload progress for graphical progress bar  etc      xhr open  post   uploadImageToServer php      xhr send new FormData fileForm          A final note   Although this topic is about images  it potentially applies to other kinds of files or resources also   For example  preventing the use of stale script or css files  or perhaps even refreshing updated PDF documents  using  4  only if set up to open in-browser    Method  4  might require some changes to the above javascript  in these cases

User · Answer

The following code is useful to refresh image when a button is clicked   function reloadImage imageId       imgName    vishnu jpg     for example    imageObject   document getElementById imageId      imageObject src   imgName      lt img src  vishnu jpg  id  myimage    gt    lt input type  button  onclick  reloadImage  myimage      gt

User · Answer

No need for new Date   getTime   shenanigans  You can trick the browser by having an invisible dummy image and using jQuery  load    then creating a new image each time     lt img src    id  dummy   style  display none     gt    lt  -- dummy img -- gt   lt div id  pic  gt  lt  div gt    lt script type  text javascript  gt    var url   whatever       You can repeat the following as often as you like with the same url       dummy   load url     var image   new Image      image src   url        pic   html     append image    lt  script gt

User · Answer

x000D   x000D  function reloadImage imageId  x000D    x000D     path       showImage php cache      for example x000D     imageObject   document getElementById imageId   x000D     imageObject src   path    new Date    getTime    x000D    x000D   lt img src     showImage php  id  myimage    gt  x000D   x000D   lt br  gt  x000D   x000D   lt input type  button  onclick  reloadImage  myimage      gt  x000D   x000D   x000D

User · Answer

You can simply use fetch with the cache option set to  reload  to update the cache  fetch  quot my-image-url jpg quot    cache   reload   mode   no-cors     These days the fetch API is available almost everywhere  except on IE  of course   As always you will find detailed information on how to use the fetch API on MDN

User · Answer

document getElementById  img-id   src   document getElementById  img-id   src   set its own src as its src

User · Answer

I had a requirement  1  can t add any  var xx to the image 2  it should work cross-domain  I really like the  4 option in this answer with one but    it has problems working with crossdomain reliably  and it requires touching the server code     My quick and dirty way is    Create hidden iframe Load the current page to it  yeah the whole page  iframe contentWindow location reload true   Re-set the image source to itself   Here it is  function RefreshCachedImage         if  window self     window top  return    prevent recursion     var  img       MYIMAGE        var src    img attr  src        var iframe   document createElement  iframe        iframe style display    none       window parent document body appendChild iframe       iframe src   window location href      setTimeout function              iframe contentWindow location reload true           setTimeout function                   img removeAttr  src   attr  src   src              2000          2000       Yeah  I know  setTimeout    You have to change that to proper onload-events

User · Answer

Simple solution  add this header to the response   Cache-control  no-store   Why this works is clearly explained at this authoritative page  https   developer mozilla org en-US docs Web HTTP Headers Cache-Control  It also explains why no-cache does not work   Other answers do not work because   Caching delete is about a new cache that you may create for off-line work  see  https   web dev cache-api-quick-guide   Fragments using a   in the URL do not work because the   tells the browser to not send a request to the server   A cache-buster with a random part added to the url works  but will also fill the browser cache  In my app  I wanted to download a 5 MB picture every few seconds from a web cam  It will take just an hour or less to completely freeze your pc  I still don t know why the browser cache is not limited to a reasonable max  but this is definitely a disadvantage

User · Answer

Try using a worthless querystring to make it a unique url   function updateImage         if newImage complete            document getElementById  theText   src   newImage src          newImage   new Image            number            newImage src    http   localhost image jpg     new Date               setTimeout updateImage  1000

User · Answer

One answer is to hackishly add some get query parameter like has been suggested   A better answer is to emit a couple of extra options in your HTTP header   Pragma  no-cache Expires  Fri  30 Oct 1998 14 19 41 GMT Cache-Control  no-cache  must-revalidate   By providing a date in the past  it won t be cached by the browser  Cache-Control was added in HTTP 1 1 and the must-revalidate tag indicates that proxies should never serve up an old image even under extenuating circumstances  and the Pragma  no-cache isn t really necessary for current modern browsers caches but may help with some crufty broken old implementations

User · Answer

I used the below concept of first binding the image with a false buffer  url and next binding it with the valid url    imgcover ImageUrl   ConfigurationManager AppSettings  profileLargeImgPath      Myapp CoverPic     userid    Buffer jpg    imgcover ImageUrl   ConfigurationManager AppSettings  profileLargeImgPath      Myapp CoverPic     userid     jpg     This way  I am forcing the browser to refresh with valid url

User · Answer

As an alternative to     newImage src    http   localhost image jpg     new Date   getTime         it seems that     newImage src    http   localhost image jpg     new Date   getTime         is sufficient to fool the browser cache without bypassing any upstream caches  assuming you returned the correct Cache-Control headers  Although you can use     Cache-Control  no-cache  must-revalidate      you lose the benefits of the If-Modified-Since or If-None-Match headers  so something like     Cache-Control  max-age 0  must-revalidate      should prevent the browser from re-downloading the entire image if it hasn t actually changed  Tested and working on IE  Firefox  and Chrome  Annoyingly it fails on Safari unless you use     Cache-Control  no-store      although this still may be preferable to filling upstream caches with hundreds of identical images  particularly when they re running on your own server   -   Update  2014-09-28   Nowadays it looks like Cache-Control  no-store is needed for Chrome as well

User · Answer

Heavily based on Doin s  4 code  the below example simplifies that code a great bit utilising document write instead of src  in the iframe to support CORS  Also only focuses on busting the browser cache  not reloading every image on the page   Below is written in typescript and uses the angular  q promise library  just fyi  but should be easy enough to port to vanilla javascript  Method is meant to live inside a typescript class    Returns a promise that will be resolved when the iframe has completed reloading  Not heavily tested  but works well for us       mmForceImgReload src  string   ng IPromise lt void gt            var deferred    q defer lt void gt             var iframe   window document createElement  iframe             var firstLoad   true          var loadCallback    e    gt                if  firstLoad                    firstLoad   false                  iframe contentWindow location reload true                 else                   if  iframe parentNode  iframe parentNode removeChild iframe                   deferred resolve                                    iframe style display    none           window parent document body appendChild iframe           iframe addEventListener  load   loadCallback  false           iframe addEventListener  error   loadCallback  false           var doc   iframe contentWindow document          doc open            doc write   lt html gt  lt head gt  lt title gt  lt  title gt  lt  head gt  lt body gt  lt img src      src      gt  lt  body gt  lt  html gt             doc close            return deferred promise

User · Answer

I had this same issue using the Unsplash random image feature  The idea of adding a dummy query string to the end of the URL is correct  but in this instance a completely random parameter doesn t work  I tried it   I can imagine it s the same for some other services too  but for unsplash the parameter needs to be sig  so your image URL would be  for example  http   example net image jpg sig RANDOM where random is a random string that will NOT be the same when you update it  I used Math random   100 but date is suitable too  You need to do the above because without it  the browser will see that the image at said path has already been loaded  and will use that cached image to speed up loading  See https   github com unsplash unsplash-source-js issues 9

User · Answer

I solved this problem by sending the data back through a servlet   response setContentType  image png    response setHeader  Pragma    no-cache    response setHeader  Cache-Control    no-cache  must-revalidate    response setDateHeader  Expires   0    BufferedImage img   ImageIO read new File imageFileName     ImageIO write img   png   response getOutputStream       Then from the page you just give it the servlet with some params to grab the correct image file    lt img src  YourServlet imageFileName imageNum1  gt

User · Answer

lt img src  someurl com someimage ext  onload  imageRefresh this  1000    gt    Then below in some javascript   lt script language  javascript  gt   function imageRefresh img  timeout        setTimeout function          var d   new Date       var http   img src       if  http indexOf   amp d       -1    http   http split   amp d    0            img src   http     amp d     d getTime           timeout        lt  script gt    And so what this does is  when the image loads  schedules it to be reloaded in 1 second  I m using this on a page with home security cameras of varying type

User · Answer

Try adding a cachebreaker at the end of the url   newImage src    http   localhost image jpg     new Date   getTime      This will append the current timestamp automatically when you are creating the image  and it will make the browser look again for the image instead of retrieving the one in the cache

User · Answer

What I ended up doing was having the server map any request for an image at that directory to the source that I was trying to update  I then had my timer append a number onto the end of the name so the DOM would see it as a new image and load it   E g   http   localhost image jpg   and http   localhost image01 jpg   will request the same image generation code but it will look like different images to the browser   var newImage   new Image    newImage src    http   localhost image jpg   var count   0  function updateImage         if newImage complete            document getElementById  theText   src   newImage src          newImage   new Image            newImage src    http   localhost image id image    count       jpg             setTimeout updateImage  1000

User · Answer

I improved the script from AlexMA for showing my webcam on a web page wich periodically uploads a new image with the same name  I had issues that sometimes the image was flickering because of a broken image or not complete  up loaded image  To prevent flickering I check the natural height of the image because the size of my webcam image did not change  Only if the loaded image height fits the original image height the full image will be shown on page      lt h3 gt Webcam lt  h3 gt     lt p align  center  gt       lt img id  webcam  title  Webcam  onload  updateImage     src  https   www your-domain com webcam current jpg  alt  webcam image  width  900  border  0    gt        lt script type  text javascript  language  JavaScript  gt          off-screen image to preload next image     var newImage   new Image        newImage src    https   www your-domain com webcam current jpg           remember the image height to prevent showing broken images     var height   newImage naturalHeight       function updateImage                    for sure if the first image was a broken image         if newImage naturalHeight  gt  height                      height   newImage naturalHeight                        off-screen image loaded and the image was not broken         if newImage complete  amp  amp  newImage naturalHeight    height                          show the preloaded image on page           document getElementById  webcam   src   newImage src                        preload next image with cachebreaker         newImage src    https   www your-domain com webcam current jpg time     new Date   getTime                refresh image  set the refresh interval to half of webcam refresh              in my case the webcam refreshes every 5 seconds          setTimeout updateImage  2500               lt  script gt   lt  p gt

User · Answer

Place a second copy of the image in the same spot  then remove the original image  ele insertAdjacentHTML  beforebegin  ele outerHTML   ele parentNode removeChild ele    This will effectively refresh the image

[javascript] Refresh image with a new one at the same url

Examples related to javascript

Examples related to image

Examples related to url

Examples related to refresh