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.

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    More on JavaScript Image Object
    Image SlideShow Script using navigational buttons
    Image Loading to cache while page load by Image object
    Reloading the image without refreshing the page
    Image Rotator Script for automatic Slideshow
    Image Move across by button click
    Image Move continuously across screen
    Image offSetLeft and offSetTop to get position of the image from left and top
    Image Position : Positioning an image by assigning value to style.top and style.left
    Image width: Managing width of the image
    Image height: managing height of the image
    Image align: Image align left or right
    Image border: adding and removing border from Image
    Image alt: updating or reading alt message of image
    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!!

    Post your comments , suggestion , error , requirements etc here .




    ✖
    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2022 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer