Как файл обрабатывается при запросе в css: hover в качестве фонового изображения - PullRequest
Новая
       28

Как файл обрабатывается при запросе в css: hover в качестве фонового изображения

0 голосов
/ 26 марта 2011

В моем приложении ASP.NET MVC есть пользовательский httpHandler, который должен выполняться всякий раз, когда запрашивается изображение. Если у меня есть определение CSS, как это: 

div#cssSwitch
{
    background-image: url('/Content/themes/base/images/a.png');
}

при загрузке страницы выполняется обработчик. Тем не менее, у меня также есть этот кусок CSS 

div#cssSwitch:hover
{
    background-image: url('/Content/themes/base/images/b.png');
}

но обработчик никогда не выполняется для этого изображения. Не во время загрузки страницы, не после зависания над элементом. Почему?

EDIT

Мой обработчик пока пуст. Я отлаживаю его локально с помощью точки останова, чтобы приложение прерывалось при выполнении обработчика.

Пока что кажется, что изображение на :hover было кэшировано. Когда кеш удаляется, он работает как положено. Однако я бы предпочел способ отрицать кэширование изображения. Есть что-то?

С уважением, Trim.

Ответы [ 5 ]

3 голосов
/ 26 марта 2011

Поскольку событие зависания находится на стороне клиента. И как только изображение загружается при первом запросе, браузер может его кешировать. Таким образом, ваш обработчик не выполняется при последующем запросе.

1 голос
/ 26 марта 2011

Браузер использует «нормальный» GET и должен обращать внимание на заголовки HTTP, как и для любой другой выборки изображений.

Чтобы предотвратить кэширование, отправьте обратно соответствующие обработчики HTTP («no-cache»,так далее).Также может быть возможным отправить обратно «304 Not Modified», чтобы по возможности избежать отправки данных, в то же время заставляя клиента «повторно запросить» изображение.

Однако запрос изображения будет происходит только один раз , если только свойство CSS не изменено (например, в JavaScript) - даже если кэширование отключено.Кроме того, CSS не «выполняется» при применении стиля;ресурсы - это просто то, чем они являются. Это означает, что браузер может - и, вероятно, делает - загружать все ресурсы url() в CSS до того, как будет применено конкретное правило.Фактический порядок / время загрузки не определен AFAIK, но активная загрузка значительно проще и последовательнее.

Как указывалось выше, использование динамического свойства, установленного в JS, может заставить браузер повторно выбирать ресурс дляправила GET, но на данный момент попытки использовать CSS вообще для этой цели могут быть сомнительными.

Удачное кодирование.

0 голосов
/ 27 марта 2011

Если вы не используете контроллер для обслуживания изображения, вам придется настроить кэширование в IIS.

Если вы используете контроллер для обслуживания изображения, вы можете использовать decorateдействие / контроллер с этим атрибутом 

[Cache(Duration=0)]
public ActionResult Image(string imageName)
{
    // return the image
}

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public class CacheAttribute : ActionFilterAttribute
{
    public CacheAttribute()
    {
        Duration = 10;
    }

    /// <summary>
    /// Gets or sets the cache duration in seconds. The default is 10 seconds.
    /// </summary>
    /// <value>The cache duration in seconds.</value>
    public int Duration
    {
        get;
        set;
    }

    public override void OnActionExecuted(ActionExecutedContext filterContext)
    {
        if (Duration <= 0) return;

        HttpCachePolicyBase cache = filterContext.HttpContext.Response.Cache;
        TimeSpan cacheDuration = TimeSpan.FromSeconds(Duration);

        cache.SetCacheability(HttpCacheability.Public);
        cache.SetExpires(DateTime.Now.Add(cacheDuration));
        cache.SetMaxAge(cacheDuration);
        cache.AppendCacheExtension("must-revalidate, proxy-revalidate");
    }
}
0 голосов
/ 26 марта 2011

Это, скорее всего, связано с тем, что ваш браузер кэшировал изображение при первой загрузке страницы, и поэтому извлекает изображение из локального кэша при следующем просмотре или обновлении страницы.

Вы можете попробовать полное обновление, обычно, удерживая клавишу Ctrl и нажимая F5.

Если вы хотите прекратить кэширование более навсегда, вы можете использовать 

Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
Response.Cache.SetValidUntilExpires(false);
Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetNoStore();

Посмотрите этот ответ или этот ответ для получения дополнительной информации о том, как создать пользовательский атрибут.

0 голосов
/ 26 марта 2011

CSS-выражения, такие как: Hover, ожидает найти файл, на который он указывает, дополнительная работа не требуется.

в указанном вами случае, и, предполагая, что ваш обработчик может обрабатывать запросы к изображениям, вы можете предоставитьэтот файл является полным URL-адресом, поэтому обработчик возьмет на себя инициативу и предоставит файл.

, поэтому вместо: 

div#cssSwitch:hover
{
    background-image: url('/Content/themes/base/images/b.png');
}

должно быть: 

div#cssSwitch:hover
{
    background-image: url('http://www.MY_WEB_SITE.com/Content/themes/base/images/b.png');
}
...