CODEWITHSUNDEEP
apachebrowser-cachecache-control
user1041580
user1041580

Reputation: 209

Stuck with Images/CSS cached by browser

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.

Upvotes: 0

Views: 506

Answers (1)

GGJ
GGJ

Reputation: 644

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.

Upvotes: 1

Related Questions