Reloading Images Using JavaScript

There are some situations where you want to reload an image without refreshing the page containing it. This is especially handy with CAPTCHA images, where you might want to give the user the option to get a new code in case the first is too hard to read.

It sounds simple enough, but then there is browser caching that you need to work around. Fortunately, this problem is easy to solve just by altering the URL of the source, adding a unique string to the end (such as a timestamp) as a GET parameter. Here is a little JavaScript function that will accomplish this:

1
2
3
4
5
6
7
8
9
10
11

function reloadImg(id) {
   var obj = document.getElementById(id);
   var src = obj.src;
   var pos = src.indexOf('?');
   if (pos >= 0) {
      src = src.substr(0, pos);
   }
   var date = new Date();
   obj.src = src + '?v=' + date.getTime();
   return false;
}

To use it, all you need to do is pass the id of the image to the function, like this:

<img src="image.jpg" id="img" />
<a href="#" onClick="return reloadImg('img');">Reload Image</a>

I haven't tested it, but this should also work for other elements that use the src attribute.

Try it here:

Reload Image

Similar Posts:

• Toggle Display of Page Elements with JavaScript
• Generating (X)HTML Documents Using DOMDocument In PHP
• Saving Time With jQuery

Author: Steve

Steve is the owner of UlraMega Tech. He is a freelance Web designer and developer who specializes in PHP and AJAX development.