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.

Links 1 – JQuery animation effect

JQuery Animation Effect Links, here are some of the awesome animation effect you can consider while building a website,

  • 13 Excellent jQuery Animation Techniques – With several JavaScript frameworks available, jQuery is quickly becoming a favorite. If you are interested in using jQuery for animated effects, here are 13 excellent tutorials to get you on your way.
  • 16 Impressive Flash like javascript – Since the introduction of javascript frameworks like prototype, jQuery and mootools, a lot other frameworks that designed to enhance the animation abilities have emerged. Now, we can create impressive javascript animation easily and your visitors just wouldn't able to tell the differences.
  • Fun with JQuery animation for designer – This does not contain much but would be helpful for designers.
  • JSAnim – This tutorial contains some awesome Animation effects using JQuery.
  • 20 Easy to learn JQuery animation tutorialsAnimation on websites has gone a long way, some time ago everything and anything that had movement on a website was automatically categorized as Flash, now we have these different technologies that have raised the standard and have broken the mold. One of these key technologies is jQuery, and with the powerful scripting language that it represents (JavaScript) you can do amazing things.
  • Abusing JQuery.Animate – . In the case of jQuery, you can easily animate any CSS property, and you get free work-arounds for browser bugs to boot. You can run multiple animations (of arbitrary duration) at the same time, queue animations and even animate complex properties like colors or clipping rectangles.
  • JQuery color plugin and JQuery animation – In this post you will see how to create some cool menus with jQuery and  jQuery Color Plugin.

Featured JQuery Animation Effect

JParallax

 

JParallax EffectjParallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way. JParallax in background sampleJParallax Sample

13 Excellent jQuery Animation Techniques