Reloading image in JavaScript by click of button in JavaScript

Reloading Image in JavaScript

We have displayed an image and now we want to reload the image part only. Check that we are not reloading the full page, we are only reloading the image.

Why reloading is required.

In our captcha generation script , some time user may need another text inside image to be generated.

Let us start with the image display part. Simple one is here .

<img src=captcha-demo.php id="capt">
<input type=button onClick=reload(); value='Reload image'>

Now you can see we have connected onClick button event to a function reload(). The code or reload function is here.

<script type="text/javascript">
function reload()
{
img = document.getElementById("capt");
img.src="captcha-demo.php?rand_number=" + Math.random();
}
</script>

While reloading the image we have added math random number to prevent retrieving the image by browser form cache.
Image Object

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com

name	24-11-2014
this is great method, thanks for your post, but i am using like this. img.src="captcha-demo.php?rand_number=" + (new Date()).getTime());

Kade	25-11-2016
Works great and uses minimal code. Thank you!!