Javascript 为什么我的spritesheet被多次加载?
我有一个精灵表驱动一组按钮的外观,这些按钮会随着各种鼠标操作的变化而变化。但是,在精灵之间切换时,我可以看到闪烁,并且查看chrome或firebug中的网络面板可以确认,每当精灵发生更改时,精灵表都会重新加载,这与使用精灵表的目的背道而驰 处理交换精灵的jquery代码如下:Javascript 为什么我的spritesheet被多次加载?,javascript,jquery,css,css-sprites,Javascript,Jquery,Css,Css Sprites,我有一个精灵表驱动一组按钮的外观,这些按钮会随着各种鼠标操作的变化而变化。但是,在精灵之间切换时,我可以看到闪烁,并且查看chrome或firebug中的网络面板可以确认,每当精灵发生更改时,精灵表都会重新加载,这与使用精灵表的目的背道而驰 处理交换精灵的jquery代码如下: $(".btn").mouseover(function () { var imgId = $(this).prop("id"); if (imgList[imgId]) { if (!$
$(".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在运行时重新加载?有更好的方法吗?不要在每个类上声明一个
背景图像
,您应该有一个具有背景图像
的单一类名(如.NavShowHide
),然后使用更具体的类来定义背景位置
:
.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>
我的按钮