Stuck with Images/CSS cached by browser

Question

There are some images present on my web page which we do update from back end. But those images not getting reflect directly means user need to do ctr+F5. It means client's browser cached that images. Is there any way to reload updated images, JS, CSS once thay got updated?

What I have try from my side.

ETag

Which didn't work for me.

Added following tags in my page header

<meta http-equiv="Expires" CONTENT="-1" ></meta>

<meta http-equiv="cache-control" content="no-cache"></meta>

<meta http-equiv="Pragma" CONTENT="no-cache"></meta>

But same result.

Added following configurations in Apache

ExpiresActive on
ExpiresByType application/javascript "access plus 0 seconds"
ExpiresByType image/jpg "access plus 0 seconds"
ExpiresByType image/jpeg "access plus 0 seconds"
ExpiresByType image/gif "access plus 0 seconds"
ExpiresByType image/png "access plus 0 seconds"
ExpiresByType text/css "access plus 0 seconds"

Above configurations works for JS. But facing problem with images. I can't add any token number or version number at the end of url/image name which required too much code change and testing too. Please guide me is there any other centralized way to restrict images,css from caching

Thanks in Advance.

GGJ · Accepted Answer · 2012-02-23 10:13:03Z

1

You can use javascript to change the src of any image, this will cause the name to change and force the browser to reload.

Example:

document.getElementById('myimg').src = document.getElementById('myimg').src + '?r=' + Math.random();

Not the cleanest solution but it seems your options are limited.

To reload the entire pages images with jQuery you could try:

$('img').each(function() {
    $(this).attr('src', $(this).attr('src') + '?r=' + Math.random())
});

By modifying the initial selector you can limit it to an area so you don't end up reloading everything. This will not effect images specified by css styling.

answered Feb 23, 2012 at 10:13

GGJ

6544 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1041580 Over a year ago

Thanks for your replay, But as I mention I am not able to do code change. Want some centralize solution so that just change on one place and reflect it in application.

GGJ Over a year ago

Have you checked apache settings? Apache Help

user1041580 Over a year ago

Yes. it's same which I have given above. Above configurations I got from Same link which you pass in above comment.

GGJ Over a year ago

If you can modify the page headers why can't you add a javascript file tag?

Collectives™ on Stack Overflow

Stuck with Images/CSS cached by browser

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related