3

我有一个精灵表来驱动一组按钮的外观，这些按钮会随着各种鼠标操作而变化。但是，在精灵之间切换时我可以看到闪烁，并且在 chrome 或 firebug 中查看网络面板确认每次更改精灵时都会重新加载精灵表，这违背了使用精灵表的意义。

处理换出精灵的 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 是用于应用精灵的类名列表，所有这些都是类的完整列表。这是一个示例：

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 代码都引用了工作表中的一个图像：

.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 在运行时重新加载？有更好的方法吗？

4

1 回答 1

2

不要在每个类上声明 a 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-04T18:44:54.550 回答