How to say browser to reload new version of images

Viewed 83

I have versioned JS a CSS files and it works very well. .htaccess:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

php function:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

and used:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

Now i have problem with images in css files which are not reloaded when new css is reloaded. For example css content:

.mysprite {
    background: transparent url("../mysprite.svg") no-repeat;
}

How to force the browser to reload also new images? There are many and many images in my other css files and it is not possible to change their random name in css like JS and CSS filenames.

I tried in htaccess this:

FileETag MTime Size

but no help.

1 Answers

You can set the headers to force reloading all resources, like this:

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />

If you want a maximum of compatibility you can go all out with something like this

 <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  <meta http-equiv="pragma" content="no-cache" />
Related