Rails 3: Как предотвратить кэширование изображений, когда изображение указано в файле CSS?

Рассмотрим следующий CSS:

.my_class {
  background-image: url(/images/sprites.png);
}

Иногда я меняю sprites.png добавив в него новые спрайты, чтобы браузер не кэшировал его.

Одна мысль, о которой я подумал, это добавить style="background-image: url(/images/sprites.png?<random_number_here>)" для всех элементов с классом my_classи удалите код CSS выше. Но мне не нравится это решение из-за проблем с удобством сопровождения (если, например, имя файла меняется, я должен изменить его во многих местах, а не в одном CSS).

Какие другие решения существуют для этой проблемы?

Источник

3 ответа

Решение

Одним из способов решения этой проблемы является добавление строки версии в каталог стилей.

<link rel="stylesheet" href="/css.1000/styles.css" type="text/css" />

Убедитесь, что ваш CSS использует URL-адреса относительно этого каталога. (В этом примере каталог изображений для ссылок CSS css.1000/image)

.my_class {
    background-image: url(images/sprites.png);
}

Затем используйте mod_rewrite добавить правило перезаписи в .htaccess файл в корневой папке вашего сайта, это сделает любой числовой путь /css.1000/styles.css указать на /css/styles.css на сервере:

RewriteEngine On
RewriteRule css[\.][0-9]+/(.*)$ css/$1 [L]

Каждый раз, когда вы меняете ресурсы своего сайта, вы меняете номер версии папки в ссылке на таблицу стилей.

Источник

Я бы предложил один из этих двух методов:

Используйте Javascript для выполнения техники обновления кэша.

 $('.my_class').ready(function() { 
   $(this).css('background-image', 
    $(this).css('background-image') + "?" + Math.random());
 }

Используйте определенный серверный контент-контроль для данной страницы. Это из ответа StackExchange для nginx ( аналогичные методы существуют в apache):

 server {
   ...

   location = /images/sprites.png {
    expires 1d;
   }
   ...
 }

Они оба будут работать, чтобы помочь смягчить вашу проблему. Удачи!

Источник

Используйте конвейер ресурсов rails (т.е. rails > 3.1), и он автоматически сделает это за вас с помощью механизма снятия отпечатков:

http://guides.rubyonrails.org/asset_pipeline.html

Переименуйте ваш mycss.css в mycss.css.erb и укажите изображения как:

.my_class { background-image: url(<%= asset_path 'image.png' %>) }

Rails позаботится обо всем остальном (вам также необходимо включить прекомпиляцию ресурсов).

Источник
Другие вопросы по тегам