Preloading images for HTML games using PxLoader Posted on: 2012-05-23

I've had the opportunity at work to do some development on a couple of HTML games (with the conscious attempt to move away from flash and make them work on mobile devices). One of the issues I ran into was that I was getting a FOUC due to the resources for these games taking a while to load. Enter the amazing PxLoader which solved all my preloading problems.

The next issue I had was that the game was still in development, so I had to keep adding to the list of images to preload. I eventually got fed up with this and figured there must be a way I can script my way out of this headache (and future proof for future development). So what I came up with works as follows: Scan the directory that has the images and make that available to my JS, then pass PxLoader the list, and go from there.

"What about the code?" I hear you cry... well fear not... here it is:

Download and include both the 'PxLoader.js' and 'PxLoaderImage.js' files in your <head>, then put the following before your '</head>':

<script type="text/javascript">
    // This will be the path to the images on the file system (ie: NOT a url)
    $images = scandir('/path/to/images/');
    $images = array_filter($images, function($var) {
        // Filter out:
        // * directories
        // * anything beginning with a '.' (ie: '.', '..', '.DS_Store', etc...)
        if ( is_dir( '/path/to/images/'.$var ) || substr( $var, 0, 1 ) === '.' ) {
            return false;
        return true;
    $images = "'".implode("','", $images)."'";
    echo "var IMAGES_TO_PRELOAD = [".$images."];";

Then put the following into your JS file (which you'll need to execute after the above or on DOM ready):

var loader = new PxLoader();
for ( i = 0; i < IMAGES_TO_PRELOAD.length; i++ ) {
    // This will be the static URL to the image.
    loader.addImage( '/path/to/images/'+IMAGES_TO_PRELOAD[i] );

loader.addProgressListener(function(e) {
    var percent = Math.round( e.completedCount / e.totalCount * 100 );
    // Use the 'percent' variable to display the progress to the user
loader.addCompletionListener(function() {
    // Work your magic here

... and there you have it. You can now drop in images to your heart's content without having to worry about whether your resource loader knows about them (note: I only needed to scan for images one level deep, so you might have to modify the code to better suit your purposes).

As always: feel free to let me know what you think below.