gpt4 book ai didi

javascript - 为什么我的 spritesheet 被加载了多次?

转载 作者:行者123 更新时间:2023-11-29 14:57:14 26 4
gpt4 key购买 nike

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

处理换出 Sprite 的 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 是用于应用 Sprite 的类名列表,其中 all 是类的完整列表。这是一个示例:

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

最佳答案

而不是声明 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>

关于javascript - 为什么我的 spritesheet 被加载了多次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15819154/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com