1

我有一个 1320x1320 的精灵表，其中每张图片都是 120x120，总共 120 张图片。我想如果我在 JS 中这样做：

for (var i = 1; i < 114; i++) { 
    Heroes[i].style.backgroundPosition = -72 * i + "px " + Math.floor(i / 11) * -72 + "px";
    // i'm assigning more values here that aren't in the overall class here but didn't want to bore you guys with pointless code
}

我认为通过在 JS 中编写它几乎可以完成 CSS，但需要额外的资源来完成所有数学运算并将其输入到 CSS，所以我进入 Excel 并让它为我完成所有数学运算并复制粘贴的 120 个 CSS 类，然后我创建了一个包含名称的数组，并让 JS 将它们链接到类名。它不应该加载更快吗？如果属实，我怀疑我是否节省了大量资源，但我喜欢尝试尽可能简洁高效地编写代码。

现在我想到了一个问题，我提出这个问题的原因是，如果在页面加载后使用计时器（比如 10 毫秒）返回 JavaScript 实际上会更快吗？所以初始加载时间尽可能快地加载，玩家可以看到我正在开发的游戏的菜单屏幕，当他们使用菜单将它们带到某个地方时，它会完成 JavaScript 加载和放置所有我的图像。由于计算机的速度如此之快，在初始页面加载 spritesheets + html 和 css 之后用 JS 加载甚至 500 张图像，应该没什么吧？

非常感谢有关此主题的任何建议和信息！提前感谢您的帮助。

编辑：

所以我对它进行了相当多的测试，发现一个似乎工作得很好的解决方案，超时 10ms 的事情：

setTimeout(function() {
    var heroesJS = document.createElement("script");
    heroesJS.src = "heroes.js";
    document.getElementsByTagName("head")[0].appendChild(heroesJS);
},3000);

第一个问题，我是从 w3schools 复制过来的，但是我以为大家都说要在 body 标签结束之前放脚本，那么在那儿使用 head 标签可以吗？现在我的主要新问题是：

你认为上面的方法更好吗，还是我应该只包装我的 for 循环，为函数内的所有内容创建图像和放置，这样它实际上并没有做任何“繁重的工作”，而是加载 JS 文件，一旦一切都完成加载，我然后调用函数做幕后工作？

4

3 回答 3

0

正如你所做的那样，我会尽快显示菜单，然后我会设置一个超时（或调查是否可以使用 HTML5 工作人员来实现），并在回调中设置背景图像偏移量，一个或一个单独的超时几张图片。

然后我会确保万一这些超时在用户想要观看游戏时没有完成，我会在游戏开始之前完成剩余的图像。

这有意义吗？

于 2013-06-09T02:05:47.967 回答
0

如果它是一个紧密的网格，那么为什么要使用偏移和绝对定位？只需让图像像普通的 HTML 图像一样作为内联块元素流动。您可以将容器设置为绝对宽度。这消除了大量的复杂性，应该使一切加载速度更快！

于 2013-06-09T03:43:10.760 回答
0

使用内容交付网络怎么样？它可能会加快图像的加载速度。

于 2013-06-09T03:51:41.760 回答