Question

我有一张1320x1320的spritesheet，每幅图像为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将它们链接到类名。它不应该加载更快？如果是真的，我怀疑我节省了大量资源，但我喜欢尽可能地编写干净，高效的代码。

现在刚出现的问题以及为什么我提出这个问题，回到JavaScript后实际上会更快，但是在页面加载后有一个计时器（比如10ms）？因此，初始加载时间尽可能快地加载，玩家可以看到我正在处理的游戏的菜单屏幕，当他们使用菜单将它们带到某个地方时，它将完成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文件并且一旦完成所有事情加载，然后我调用函数来完成幕后工作？

Answer 1

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

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

这有意义吗？

Answer 2

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

Answer 3

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

加快初始加载时间的技巧

3 个答案: