Javascript Preloading

Javascript preloading is great when you have a ton of images you need to use on a page or in an app, but you don’t need to show them right away.

Here is the basic code needed to get that started.

HTML

This will create a “Loading” div. You will need to find your own “loading.gif”, but that shouldn’t be hard.

$image_preloads is just an array you can build however you want which contains all of the sources of images you want to load.

JS

This JS script will wait until the window loads (including all image) and then it will start loading all the “.load-me” images into the device’s cache.

CSS

This is all up to you and your style decisions, but here is a basic start for your CSS.