This post will discuss how to refresh an image without reloading the page in JavaScript and jQuery.

1. Using jQuery

To force the browser to fetch the latest version of an image instead of using the cached version, you can simply append a random string at the end of the image URL. This will cause the browser to treat the URL as a different URL and avoid retrieving the cached version.

The following example demonstrates this by appending the current timestamp to the image URL.

JS


HTML



Edit in JSFiddle

 
Alternatively, you can use a random number instead of the timestamp to force a refresh.

JS


HTML



Edit in JSFiddle

 
Another plausible way is to first remove the src attribute from <img> element using the .removeAttr() method, and then set it again with .attr() method.

JS


HTML



Edit in JSFiddle

2. Using JavaScript

In pure JavaScript, you can append a random number or current timestamp at the end of the image URL like:

JS


HTML



Edit in JSFiddle

That’s all about reloading an image in JavaScript and jQuery.