Preloading Transition Images

Matt Karl edited this page Oct 8, 2015 · 1 revision

Sometimes transition images need to be loaded before a transition can be created. This document contains two approaches for preloading images for your application.

Method 1: Using options.preload

Preload transition assets before the application starts using the preload option, adding a complete callback for each image to handle it's load.

var app = Application({
	preload: [
		{
			id: "transition1",
			src: "assets/images/transition1.png"
			complete: onImageLoaded
		},
		{
			id: "transition2",
			src: "assets/images/transition2.png"
			complete: onImageLoaded
		}
	]
});

// Add to the window images object
function onImageLoaded(img, asset)
{
	window.images[asset.id] = img;
}

app.once('init', function()
{
	// Transition needs to be set before adding states
	this.transition = new lib.Transition();
});

Method 2: Using config

Create a configuration file which gets loaded with the config system which contains the assets that need to get loaded.

var app = Application({
	configPath: 'assets/config/config.json'
});

// Listen for the configLoaded event
app.once('configLoaded', function(config, assets))
{
	// Add the assets (where they are stored)
	// and add them to the assets object to get 
	// loaded afterwards
	config.transitionAssets.forEach(function(asset)
	{
		asset.complete = onImageLoaded;
		assets.push(asset);
	});
});

// Add to the window images object
function onImageLoaded(img, asset)
{
	window.images[asset.id] = img;
}

app.once('init', function()
{
	// Transition needs to be set before adding states
	this.transition = new lib.Transition();
});
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.