How to prevent image from caching in javascript

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.

New Google design like Bing

I just came across Google’s new design. I was wondering I have seen this design somewhere so I just opened Bing to compare the design and what I saw was shocking. Google has mimicked Bing’s design.

Here is Google’s New Design

Google's New Design

Google's New Design

And here is the Bing’s Design

Bing's Design

Bing's Design

Google didn’t checked the Bing’s design? or Google liked the Bing’s design so much? 🙂 What’s your say on this?