Lesson 20

Preloading images and Debugging

Speeding up the gameplay and testing for errors

There is one last thing we could fix in our games to add a final smartening touch to the gameplay. You might find that your images are a little sluggish to load, and they don't always display in sync.

This is because we are reloading the background image each time. What we can do is preload the images first - then the browser will be able to call the cached versions and run much more smoothly.

What is 'cached'?

Cached means that something - usually images or videos - are saved to a user’s browser so that they can be loaded more quickly.

1. Add preloading spans to HTML

In your HTML, just below the second canvas element, add in some spans with unique IDs. Each span needs a unique id, for example we've used 'preload-01' etc.. You will need the same number of spans as you have images in your game.

2. Add background images to your spans in CSS

In your CSS add an instruction for each of your new spans. Each span should be given one of your images as its background.

As we haven't given our spans any size they will not display in our page. However, our CSS will now preload our images.

What does the # mean?

In CSS and jQuery a hash symbol means that you are targeting the “id” of an element.

3. Check our images are preloading in network

Test out your game. Hopefully the images should load much more smoothly now.

You can also check the images are loading by using a browser tool similar to the console from Lesson 11. Open the console as before, but then click on the 'Network' tab which is to the left of the console at the top of the console space.

When you refresh the page you should see all your images loading in the background.

How do I open the network panel in other browsers?

If you follow the same steps to open the console from earlier in the tutorial, you’ll be able to select the “network” tab.


Feel free to customise your game. You can change the colours, fonts, the number of wins required, how fast the images cylce and add as many images as you like! I'm sure you've figured this out, but if you want to play again, simply refresh the browser.

When you're finished, make sure you share your creation with friends and family, and get practising so you can be Snap That Champion!

Our final Snap That code HTML and CSS should look like the code below.

You've just learned a huge amount about how to create interactive experiences using the lanuages of the web. Thank you for sticking with it! If you would like to see a Thimble Demo of a final working version of our "Snap Cat!" you can remix this project here. We hope you enjoyed our tutorial and happy coding!

Harriet & The Decoded Team



the web page

New Window