爲什麼我的spritesheet被多次加載？

我有一張spritesheet驅動一組按鈕的外觀，這些按鈕響應各種鼠標操作而改變。但是，在精靈之間切換時，我可以看到一個閃爍，並且使用chrome或firebug查看網絡面板可以確認每次更改精靈時都會重新加載精靈表，這會破壞使用精靈表的要點。爲什麼我的spritesheet被多次加載？

jQuery的代碼來處理交換出去的精靈是這樣的：

$(".btn").mouseover(function() { 
    var imgId = $(this).prop("id"); 
    if (imgList[imgId]) { 
     if (!$(this).hasClass(imgList[imgId]["inactive"])) { 
      $(this).removeClass(imgList[imgId]["all"]).addClass(imgList[imgId]["mouseOver"]); 
     } 
    } 
}); 

$(".btn").mousedown(function() { 
    var imgId = $(this).prop("id"); 
    if (imgList[imgId]) { 
     if (!$(this).hasClass(imgList[imgId]["inactive"])) { 
      $(this).removeClass(imgList[imgId]["all"]).addClass(imgList[imgId]["mouseDown"]); 
     } 
    } 
}); 

$(".btn").mouseout(function() { 
    var imgId = $(this).prop("id"); 
    if (imgList[imgId]) { 
     if (!$(this).hasClass(imgList[imgId]["inactive"])) { 
      $(this).removeClass(imgList[imgId]["all"]).addClass(imgList[imgId]["default"]); 
     } 
    } 
});

哪裏imgList是用來申請精靈類名的列表，全部爲類的完整列表。這裏有一個例子：

.NavShowHide-Button-inactive{background-image:url('../Images/navigation-spritesheet.png') ; background-position:-704px 0px ; height: 44px; width: 44px; display: inline-block;} 
.NavShowHide-Button-mouseDown{background-image:url('../Images/navigation-spritesheet.png') ; background-position:-748px 0px ; height: 44px; width: 44px; display: inline-block;} 
.NavShowHide-Button-mouseOver{background-image:url('../Images/navigation-spritesheet.png') ; background-position:-792px 0px ; height: 44px; width: 44px; display: inline-block;} 
.NavShowHide-Button-normal{background-image:url('../Images/navigation-spritesheet.png') ; background-position:-836px 0px ; height: 44px; width: 44px; display: inline-block;} 
.NavShowHide-normal{background-image:url('../Images/navigation-spritesheet.png') ; background-position:-880px 0px ; height: 44px; width: 44px; display: inline-block;}

有沒有在此代碼任何可能導致spritesheet在運行時重新加載：

imgList["navToggleNavigation"] = []; 
imgList["navToggleNavigation"]["default"] = "NavShowHide-Button-normal"; 
imgList["navToggleNavigation"]["mouseOver"] = "NavShowHide-Button-mouseOver"; 
imgList["navToggleNavigation"]["mouseDown"] = "NavShowHide-Button-mouseDown"; 
imgList["navToggleNavigation"]["inactive"] = "NavShowHide-Button-inactive"; 
imgList["navToggleNavigation"]["select"] = "NavShowHide-Button-select"; 
imgList["navToggleNavigation"]["all"] = "NavShowHide-Button-normal NavShowHide-Button-mouseOver NavShowHide-Button-mouseDown NavShowHide-Button-inactive NavShowHide-Button-select";

爲每個類的CSS代碼中的表引用的圖像？有更好的方法嗎？

來源

2013-04-04 Dan Monego

而是在每一個類聲明background-image的，你應該有一個類名（如.NavShowHide）具有background-image然後用更具體的類來定義background-position只：

.NavShowHide { 
    background-image:url('../Images/navigation-spritesheet.png'); 
    height: 44px; 
    width: 44px; 
    display: inline-block; 
} 
.NavShowHide-Button-inactive{background-position:-704px 0px;} 
.NavShowHide-Button-mouseDown{background-position:-748px 0px;} 
.NavShowHide-Button-mouseOver{background-position:-792px 0px;} 
.NavShowHide-Button-normal{background-position:-836px 0px;} 
.NavShowHide-normal{background-position:-880px 0px;}

然後給元素兩種類型的組合，即：

<div class="NavShowHide NavShowHide-Button-normal">My Button</div>

來源

2013-04-04 18:44:54 Steve

工程很好。謝謝！ – 2013-04-04 18:58:42

爲什麼我的spritesheet被多次加載？

回答

相關問題