如何在CSS中將文件提供服務：懸停作為背景圖片

Question

我的ASP.NET MVC應用程序中有一個自定義httpHandler，無論何時請求圖像，都將執行該自定義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');
}

但是永遠不會對此圖像執行處理程序。 不在頁面加載期間，也不在將鼠標懸停在元素上方之后。 為什么？

編輯

到目前為止，我的處理程序是空的。 我正在使用斷點在本地調試它，以使應用程序在執行處理程序時中斷。

到目前為止，似乎:hover上的圖像已被緩存。 刪除緩存后，它會按預期工作。 但是，我更喜歡一種拒絕圖像緩存的方法。 有東西嗎

問候，修剪。

Answer 1

因為懸停事件是客戶端的。 一旦將圖像加載到第一個請求上，瀏覽器可能會對其進行緩存。 因此，您的處理程序不會在后續請求中執行。

Answer 2

瀏覽器使用“常規” GET，並且應注意HTTP標頭，就像處理其他任何圖像一樣。

為了防止緩存，請發送回適當的HTTP處理程序（“ no-cache”等）。 還可能發送回“ 304未修改”以避免在可能的情況下發送數據，同時仍然使客戶端“重新請求”圖像。

但是， 除非更改了CSS屬性 （例如，在JavaScript中），否則即使禁用了緩存， 圖像請求也只會發生一次 。 同樣， 當應用樣式時 ， CSS不會“執行”； 資源僅僅是它們的本質。 這意味着瀏覽器可以並且可能確實會在應用特定規則之前加載CSS中的所有url()資源。 實際的加載順序/時間未指定AFAIK，但急切的加載明顯更容易且更一致。

如上所述，在JS中使用動態屬性集可能能夠使瀏覽器根據GET規則重新獲取資源，但在這一點上嘗試為此目的完全使用CSS可能是有問題的。

快樂的編碼。

Answer 3

像：Hover這樣的CSS表達式期望找到它指向的文件，不需要額外的工作。

在您提到的情況下，並假設您的處理程序可以處理對Images的請求，您可以將此文件提供為完整的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');
}

Answer 4

這很可能是由於您的瀏覽器已在第一頁加載時緩存了圖像，因此，當您下次查看或刷新頁面時，也會從本地緩存中檢索圖像。

您通常可以通過按住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();

查看此答案或此答案以獲取有關如何創建自定義屬性的更多信息。

Answer 5

如果您不使用控制器來提供圖像，則必須在IIS中設置緩存。

如果您使用控制器投放圖片，則可以使用此屬性裝飾操作/控制器

[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");
    }
}