1

I have a spritesheet that is 1320x1320, where each image is 120x120, for a total of 120 pictures. I figured that if I did this in 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
}

I figured by writing this in JS it would pretty much do the CSS but take extra resources for doing all the math and inputting it to CSS, so I went in Excel and made it do all the math for me and copy pasted 120 CSS classes, then I created an array with the names and made JS link them to the class names instead. Shouldn't it load faster? If true, I doubt I saved massive resources, but I like trying to code as clean and efficient as possible.

Now something that just came to me and why I made this question is, would it actually be even faster to go back to JavaScript, but with a timer (say 10ms) after the page has loaded? So the initial load time loads as fast as possible, players can see my menu screen for the game I'm working on, and by the time they use the menu to take them somewhere, it will have done the JavaScript to load and place all my images. Since computers are so insanely fast, loading even 500 images with JS after the initial page loads the spritesheets + html and css, should be nothing, right?

Any advice and information on this topic is greatly appreciated! Thanks in advance for any help.

EDIT:

So I tested it quite a bit and found one solution that seems to work perfectly fine, the timeout 10ms thing:

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

First question, I copied this from w3schools, but I thought everyone said to put scripts before the body tag ends, so is it fine to use the head tag there? Also now my main new question is:

Do you think the above method is better or should I just wrap my for loops that create the images and placement for everything inside a function so it doesn't actually do any 'heavylifting' but loads the JS file and once everythings done loading, I then call the function to do the work behind the scenes?

Hate Names
  • 1,596
  • 1
  • 13
  • 20
  • You have _way_ too many parentheses, it's mind boggling. Okay, being serious, it won't increase the performance of your code - rather just more effort in having to copy+paste into Excel your math. Linking them to the classes with the array itself is already slowing you down. The timeout however, might not be such a bad idea. – Qantas 94 Heavy Jun 09 '13 at 02:16
  • Sorry, edited it a little. That's a good point, the trouble of loading an array with 120 values and calling it each time mightov even done more work then just assining the position directly in JS is what you are saying, right? Thanks for the input. What if the array will be there regardless since it contains the names of the heroes? – Hate Names Jun 09 '13 at 02:21
  • Weird I thought I accepted the edit yet its not showing? – Hate Names Jun 09 '13 at 02:27
  • So, I suppose you're just going to set a `class` attribute and assign for each one. Actually, come to think of it if you're doing multiple style changes in the loop, you'll have multiple reflows that _shouldn't_ occur if you just assign a CSS class instead. – Qantas 94 Heavy Jun 09 '13 at 02:28
  • I've read this multiple times but don't quite understand it, sorry =(. What do you mean by multiple reflows? – Hate Names Jun 09 '13 at 02:45
  • 1
    You can check this answer and the link to N. Sullivan's article: [What's the difference between reflow and repaint?](http://stackoverflow.com/questions/2549296/whats-the-difference-between-reflow-and-repaint) – FelipeAls Jun 09 '13 at 06:17

3 Answers3

0

As you did, I would show the menu ASAP, and then I would set up a timeout (or investigated whether it is possible to achieve using HTML5 workers), and set up the background image offsets in the callbacks, a separate timeout for one or a few images.

Then I would make sure that in case these timeouts do not finish by the time the user wants to see the game, I finish the remaining images before the game starts.

Does this make sense?

akonsu
  • 28,824
  • 33
  • 119
  • 194
  • Kinda, thanks for replying btw. So you are saying I should go ahead and delete the css so the menu loads ASAP, letting it load only the majorly used css classes + html + spritesheets, then set a timeout to create, assign and place the images. I'm not familiar with what callback is, I tried to look quick over it before I replied but it seems like I'll have to read more about it. – Hate Names Jun 09 '13 at 02:15
  • Anyway, I like your idea of if the timeouts do not finish by the time the user wants to use the game, is there a way for me to add the onclick or eventlistener to certain buttons only after everythings loaded? Like if I placed the eventlisteners at the very bottom of the JS file I've set to load with timeout would it assign the onclicks at the very end or not necessarily? – Hate Names Jun 09 '13 at 02:16
  • of course you can attach event listeners dynamically from javascript. for example you can add them when you start setting your styles. – akonsu Jun 09 '13 at 03:51
0

If it's a tight grid, then why are you using offsets and absolute positioning? Just let the images flow like normal HTML images do as inline-block elements. You can set the container to an absolute width. This eliminates a ton of complexity and should make everything load much faster!

ErikE
  • 48,881
  • 23
  • 151
  • 196
  • Initially I did this but had to switch to absolute positioning because there are filters and a search bar which requires me to reposition the elements and I use absolute positioning to create the repositioning. I actually used insertNode before that and it worked perfectly but I couldn't accomplish transitions with it so I switched to absolute positioning =( Unless you know a better way – Hate Names Jun 09 '13 at 04:07
0

What about using a content delivery network? It would probably speed up how fast the image is loaded.

leeand00
  • 25,510
  • 39
  • 140
  • 297
  • I haven't even thought of this actually, but that's because it costs money. May I ask if you have a general idea on pricing or give me a good link to look into this? Thanks for the suggestion – Hate Names Jun 09 '13 at 04:03
  • This is supposed to be free: http://wpmu.org/optimize-and-host-wordpress-images-with-the-free-cloudinary-cdn/ – leeand00 Jun 09 '13 at 21:25