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
Categories
- General (7)
- News (4)
- Projects (13)
- Noty (2)
- TempServers (9)
- Software (8)
- Tips & Tutorials (51)
Archives
Links
Meta
March 5th, 2010 - 06:00
Thank you it helped me a lot
March 9th, 2010 - 21:50
Great job man, nice browser cache trouble workaround for same img name but diff content.
Thanks a lot.
May 14th, 2010 - 11:06
If you have control of the server side, you can disable the caching over on that end. Changing the query string is a pretty clean hack though
http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9
May 14th, 2010 - 11:38
Yes, but you still need to tell the browser to request the image again, and the only way I know to do this is to change the src attribute.
August 3rd, 2010 - 04:03
i have used this code in my site…thanks for the useful code kit….
August 5th, 2010 - 06:38
Great! Big thanks!
August 16th, 2010 - 07:38
perfect, u save my day!
April 27th, 2011 - 02:24
thanks. great help for our website!
May 9th, 2011 - 11:16
I’d like to ask if you have any idea how to do the same thing but with many images on the page. I need to have a button for each image and reload just one image at a time. Now whenever i call the reloadimg function it realoads all the images on the page. Any ideas on how to reaload just one image ?
May 9th, 2011 - 12:55
Each image should have a different id assigned to it, which you would use in the code to target each individual image. No two elements on a page should have the same id anyway.
May 10th, 2011 - 08:52
Thanks for the fast response
I thought that there can be a way around this ( assigning a different id to each image, because it will require a lot of work ) but I’ve managed to do it for less than 20 minutes. So thanks again.
May 10th, 2011 - 13:33
The purpose of this tutorial was to show that altering the query string in the src attribute would reload the image. Using the id to target the image element was the most direct method for the example. There are a number of other ways to target an element beside the id. If the reload button is in the same position relative to each image, you can target using previousSibling or something like that.
I always use jQuery in my projects, which makes targeting elements like this much easier.
July 10th, 2011 - 16:50
It will be useful to add a triger that refresh the image automatically, I use your code to refresh my webcam FTP Broadcast but instead of using a link I use a non-stop timer:
setInterval ( “reloadImg(‘img’)”, 1000 );
If you have multiple image you need to init a serInterval for each one’s Id.
July 14th, 2011 - 01:38
Thanks . Helped alot
August 4th, 2011 - 04:46
Thanks a lot… helped me alot… very nice solution…
August 23rd, 2011 - 23:25
Great method, very simple and intelligent.
Thanks!
August 28th, 2011 - 10:52
superb getTime() idea thanks
September 26th, 2011 - 03:28
Thanks
September 30th, 2011 - 02:29
Hello.
Thanks for the information. It was useful to me in learning PHP
November 2nd, 2011 - 13:16
THANKS
December 8th, 2011 - 03:10
Thanks a lot… helped me alot…
January 14th, 2012 - 22:53
@the JQuery fanboy – without Javascript there would be no JQuery.
January 23rd, 2012 - 04:45
Nice hint, though very verbose code.
Optimized version:
document.getElementById(id).src = document.getElementById(id).src.split(‘?’)[0]+’?'+(new Date().getTime());
(The v= isn’t necessary as the parameter is not used anyway)