19 comments

@std8590 2020-06-04 08:39:51

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.

  <h3>Webcam</h3>
  <p align="center">
    <img id="webcam" title="Webcam" onload="updateImage();" src="https://www.your-domain.com/webcam/current.jpg" alt="webcam image" width="900" border="0" />

    <script type="text/javascript" language="JavaScript">

    // 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 > height)
        {
          height = newImage.naturalHeight;
        }

        // off-screen image loaded and the image was not broken
        if(newImage.complete && 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);
    }

    </script>
</p>

@Roland 2020-04-28 19:59:23

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.

@Bazley 2019-10-07 20:10:11

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:

<img src="" id="dummy", style="display:none;" />  <!-- dummy img -->
<div id="pic"></div>

<script type="text/javascript">
  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);
</script>

@Codemaker 2018-03-19 18:16:35

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

<img src='vishnu.jpg' id='myimage' />

<input type='button' onclick="reloadImage('myimage')" />

@Tino 2020-04-03 16:06:38

Downvoted. As it is just a slightly modified copy of @Mahmoud's code, but in contrast this here is NOT refreshing the image

@J Fields 2017-10-16 16:29:59

<img src='someurl.com/someimage.ext' onload='imageRefresh(this, 1000);'>

Then below in some javascript

<script language='javascript'>
 function imageRefresh(img, timeout) {
    setTimeout(function() {
     var d = new Date;
     var http = img.src;
     if (http.indexOf("&d=") != -1) { http = http.split("&d=")[0]; } 

     img.src = http + '&d=' + d.getTime();
    }, timeout);
  }
</script>

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.

@Prashanth Shivasubramani 2017-07-28 10:17:19

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.

@jazzcat 2017-05-13 15:53:12

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:

  1. Create hidden iframe
  2. Load the current page to it (yeah the whole page)
  3. iframe.contentWindow.location.reload(true);
  4. 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.

@Hardik 2017-03-23 09:57:26

document.getElementById("img-id").src = document.getElementById("img-id").src

set its own src as its src.

@Doin 2014-03-15 21:12:20

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 & 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 '<img src="image.jpg?m=' . filemtime('image.jpg') . '">';

(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 & 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 <iframe> 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 <img> 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:

<img src="<?=htmlspecialchars(@$_GET['src'],ENT_COMPAT|ENT_HTML5,'UTF-8')?>">

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 <img> 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)&&--bs[src]) return; else delete bs[src];  // return here means don't restore until ALL forced reloads complete.

  var i, img, width = imgDim&&imgDim[0], height = imgDim&&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 & 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 <input typ="file"> 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&&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.

@Emilios1995 2015-12-25 18:59:29

I like the idea of method 4, but you can't load external content with an Iframe, can you? I'm currently using method 3 in a single-page web app, but I don't like the fact that you have to reload the whole page to get the new image, even if the template's HTML gets reloaded.

@Doin 2015-12-26 20:28:52

@Emilios: ...Also, I don't understand your comment about having to reload the whole page. Both methods (3) and (4) can be implemented in client-side javascript, without reloading anything except the one image you're refreshing. For method (3) that'd just mean using javascript to change your image's 'src' property from (e.g.) image.jpg#123 to image.jpg#124 (or whatever, so long as the bit after the '#' changes). Could you clarify what it is you're reloading, and why?

@Doin 2015-12-26 20:40:29

@Emilios: You can indeed load external (cross-domain) content into an iframe ...but you can't then access it's contentWindow via javascript to do the reload(true) call that's the critical part of the method... so no, method (4) won't work for cross-domain content. Well spotted; I'll update the "Cons" to include that.

@Doin 2015-12-27 04:31:56

@Emilios: Oops, no I won't: I realized that a simple fix (now included in my answer) allows it to work for cross-domain images as well (provided you can put a server-side script on your server).

@Doin 2015-12-27 04:46:07

@pseudosavant: Unfortunately I'm noticing this only ~17 months later, but I'm sorry to have to tell you, your edits to my code were badly broken. (To be fair, I don't think the callback code I had initially was right either). I've now rewritten part (4) extensively, both explanation & code. Your previous code never blanked images (so it could fail in odd ways, especially in IE and especially if the image was shown in multiple places), but worse it also deleted the iframe immediately after starting the full reload, which probably meant it'd work only intermittently or not at all. Sorry!

@ADTC 2016-03-27 06:02:27

@Doin for method 2, isn't it better if we do clearstatcache(true, 'image.jpg'); first? I read that PHP will cache the file stats, and I understand that even if actual mtime changed, PHP may still output the old mtime. Juice.

@ADTC 2016-03-27 07:37:47

@Doin also, for method 2, I was testing in Chrome, and it seems that when you add the ?m= part, the browser bypasses the cache and hits the server every single time. I don't know whether # will resolve this or introduce its own set of problems.

@Doin 2016-03-29 03:29:35

@ADTC I'm fairly sure that PHP only caches file stats within an individual script, that is, if your script's code reads some file info and then later reads it again, the 2nd copy will be from the statcache. For the purpose discussed here, that's probably the correct behaviour: If you have two or more copies of the same image in your HTML page, they should all have the same URL, even if the image is updated half way through the PHP script generating the page.

@Doin 2016-03-29 04:50:12

@ADTC r.e. Chrome's behaviour... Hmm, it really shouldn't be doing that. Are you sure the cache-control headers sent with the image file (when you include a querystring) are set up to permit caching? You can check them using the F12 tools network tab.

@ADTC 2016-04-01 09:35:55

There is no Cache-Control in the headers in both cases - with or without the query string. I'm using HTML5 Boilerplate .htaccess which supposedly has that. Have already made sure that Apache is reading the file, so I'm not sure why it's not sent. Isn't this what defines Cache-Control? ExpiresByType image/jpeg "access plus 1 month"

@ADTC 2016-04-01 10:02:10

Never mind that. Apparently the expires module was not enabled. I did a2enmod expires and restarted Apache. It is sending Cache-Control in headers for both cases.

@Victor 2016-10-13 22:39:39

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<void> {
        var deferred = $q.defer<void>();
        var iframe = window.document.createElement("iframe");

        var firstLoad = true;
        var loadCallback = (e) => {
            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('<html><head><title></title></head><body><img src="' + src + '"></body></html>');
        doc.close();
        return deferred.promise;
    }

@Tino 2020-04-03 16:16:04

To protect against XSS bugs you should use + encodeURI(src) + to properly escape src in the iframe.

@Timmmm 2016-07-18 13:33:14

Here's my solution. It's very simple. The frame scheduling could be better.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">      
        <title>Image Refresh</title>
    </head>

    <body>

    <!-- Get the initial image. -->
    <img id="frame" src="frame.jpg">

    <script>        
        // 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();
    </script>
    </body>
</html>

@Mahmoud 2015-05-01 15:09:39

function reloadImage(imageId)
{
   path = '../showImage.php?cache='; //for example
   imageObject = document.getElementById(imageId);
   imageObject.src = path + (new Date()).getTime();
}
<img src='../showImage.php' id='myimage' />

<br/>

<input type='button' onclick="reloadImage('myimage')" />

@nomistic 2015-05-01 15:24:36

please explain to the OP how and why this helps instead of just pasting code

@ByteHamster 2015-05-01 15:35:52

I don't think that ../showImage.phpFri May 01 2015 17:34:18 GMT+0200 (Mitteleuropäische Sommerzeit) is a valid file name... At least this is what it tries to load...

@BOOMik 2015-07-30 22:49:20

change path='../showImage.php'; to path='../showImage.php?';

@Aya 2012-03-30 12:55:53

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.

@user304602 2013-10-24 07:57:03

Great! After a lot of time trying to load my web images which were being loaded with a delay I have just solved it by applying your solution (with '#', using '?' is not working for me). Many thanks!!!

@Doin 2014-03-15 17:41:33

There are TWO caches involved here: There's the browser's regular HTTP cache, and an in-memory cache of images it has displayed recently. This latter in-memory cache is indexed by the full src attribute, so adding a unique fragment identifier ensures that the image isn't simply pulled from memory. But fragment identifiers are not sent as part of HTTP requests, so the regular HTTP cache will be used as normal. That's why this technique works.

@Shafizadeh 2015-10-03 17:01:02

There is several header cache. actually I don't know english very well, can you please tell me should I use which one?! I want something that does not cache just the photo that is changed (like a captcha), and cache other things. so Cache-Control: max-age=0, must-revalidate is good for me?

@shaffooo 2016-05-06 16:31:56

It doesn't work for me. The only thing different in my case is that I have a url to a controller action which retrieves img from db. I had other arguments for the controller action so I added it as "......&convert=true&t=" + new Date().getTime(); and "......&convert=true#" + new Date().getTime();. Is there anything I am doing wrong?

@laindir 2017-01-27 16:16:23

To avoid the overhead of object creation and/or method call, you could use an incrementing integer as the cache-buster: newImage.src = "http://localhost/image.jpg#" + i++;

@QueueHammer 2009-08-17 15:18:27

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

@TomG 2012-11-18 17:13:39

This would have the same problem of caching multiple copies of the image as the querystring solution (Paolo and some others), and requires server changes.

@tinymothbrain 2013-06-07 15:15:52

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.

<img src="YourServlet?imageFileName=imageNum1">

@BaroqueBobcat 2009-07-02 23:44:12

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.

@Edward KMETT 2009-07-02 22:57:03

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.

@QueueHammer 2009-07-02 23:07:48

This sounded like it would have worked but it still shows the same image, even with the hacks. I will add the header information to the question.

@Edward KMETT 2009-07-02 23:22:03

I just noticed that you are refreshing the same img tag over and over. The browser is probably detecting when you go to set the src that the src hasn't changed, and so its not bothering to refresh. (Since this check is happening at the DOM level and has nothing to do with the target). What happens if you add "?" + number -- to the url of the image being retrieved?

@Joel 2009-07-02 22:46:44

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

@QueueHammer 2009-07-02 23:11:41

Added the WQS to the code and verified that the request is being accepted and that the browser sees the response as coming from the address + WQS with out the image refreshing.

@Paolo Bergantino 2009-07-02 22:46:10

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.

@Tgr 2012-11-07 00:56:51

Not a very good solution as it will swamp caches (both local and upstream). Aya's answer has a better way of dealing with this.

@T4NK3R 2015-08-29 08:52:57

Also, re-displaying the same image elsewhere, without the "cache breaker" later, still shows the old cached version (at least in firefox) both ? and # :(

@Lev Lukomsky 2015-09-16 16:03:41

You can make even less code with this: 'image.jpg?' + (+new Date())

@Bruno Peres 2015-12-10 21:37:17

Is this ok to be used on Amazon S3 ?

@vp_arth 2015-12-24 06:12:02

There is Date.now() for this

@Neville Nazerane 2016-06-28 05:55:01

or if you need a function so as to use it in multiple images you could always keep appending &: newImage.src+='&'

@Coder 2016-07-05 07:03:08

Thank you @Paolo Bergantino for this answer. I am wasting my three day for clearing the image chache

@Gowtham Gopalakrishnan 2017-09-15 07:20:37

Why not Math.random()

@FlameStorm 2020-02-26 13:51:27

You can use also HASH (#) part of uri: newImage.src = "http://localhost/image.jpg#" + Date.now();

Related Questions

Sponsored Content

25 Answered Questions

[SOLVED] How to change the URI (URL) for a remote Git repository?

  • 2010-03-12 12:48:47
  • e-satis
  • 1736293 View
  • 4068 Score
  • 25 Answer
  • Tags:   git url git-remote

19 Answered Questions

[SOLVED] Encode URL in JavaScript?

18 Answered Questions

[SOLVED] What is the maximum length of a URL in different browsers?

  • 2009-01-06 16:14:30
  • Sander Versluys
  • 1292055 View
  • 4951 Score
  • 18 Answer
  • Tags:   http url browser

38 Answered Questions

[SOLVED] How to lazy load images in ListView in Android

33 Answered Questions

[SOLVED] Open a URL in a new tab (and not a new window)

  • 2011-02-05 15:52:13
  • Mark
  • 2708885 View
  • 2201 Score
  • 33 Answer
  • Tags:   javascript

18 Answered Questions

[SOLVED] How do I modify the URL without reloading the page?

23 Answered Questions

[SOLVED] Get the current URL with JavaScript?

  • 2009-06-23 19:26:45
  • dougoftheabaci
  • 2907419 View
  • 3085 Score
  • 23 Answer
  • Tags:   javascript url

31 Answered Questions

[SOLVED] What is the difference between a URI, a URL and a URN?

  • 2008-10-06 21:26:58
  • Sean McMains
  • 1163527 View
  • 4440 Score
  • 31 Answer
  • Tags:   http url uri urn rfc3986

28 Answered Questions

[SOLVED] How can I refresh a page with jQuery?

32 Answered Questions

[SOLVED] Get current URL with jQuery?

  • 2009-01-02 06:42:54
  • venkatachalam
  • 2194023 View
  • 1871 Score
  • 32 Answer
  • Tags:   javascript jquery url

Sponsored Content