Many a times when we replace the image with the same name, browser still picks up the old one. Almost every developer faces this issue, then he asks the person to clear the cache by ctrl + F5 or any other means. But is this the solution?

No, So what can we do in this case? There are two solutions,

1 – rename the new image and change the image name in code. But for a dot net developer this is pain because he may have to republish the code and send an upload of the dll again. And giving an upload of dll because of change in image is foolishness, ain’t it?

2 – Another solution is to write a javascript code so that the browser does not pick up image from the cache and loads it everytime. Following is the sample code of how you can try this,

document.getElementById('myimg').src = document.getElementById('myimd').src + '?' + (new Date()).getTime();

You need to make sure this code runs after page has loaded else, it will give an error if that image tag is not yet rendered.

In JQuery for single image code will be

$(document).ready(function(){
$("#myimg").attr('src',$(this).src + '?' + (new Date()).getTime());
});

For all the images

$(document).ready(function(){
jQuery('img').each(function(){
jQuery(this).attr('src',jQuery(this).attr('src')+ '?' + (new Date()).getTime());
});
});

Hope this helps. If you have any more idea please share it with us by dropping a comment.