PreloadJS/examples/PluginSample.html at master · CreateJS/PreloadJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
	<title>PreloadJS: Plugin Sample</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<style>
		.image {
			max-width: 320px;
			max-height: 240px;
			border: 1px solid #666;
			margin: 5px;
		}
	</style>
</head>

<body onload="init()">

<header class="PreloadJS">
	<h1>Example: Plugin</h1>

	<p>In this example, a PreloadJS plugin is defined, which parses a load item
		into an HTML image ID that is
		already present in the HTML DOM. PreloadJS will then use the image to do
		the loading, and the image
		will be displayed in its defined position when it is loaded.</p>
</header>

<img class="image" id="texas"/>
<img class="image" id="bluebird"/>
<img class="image" id="nepal"/>

<script type="text/javascript" src="../lib/preloadjs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
  http://code.createjs.com -->

<script id="editable">
	var preload;

	function init() {
		// Create a new queue.
		preload = new createjs.LoadQueue(false, "../_assets/art/");

		// Use this instead to favor xhr loading
		//preload = new createjs.LoadQueue(true, "assets/");

		var plugin = {
			getPreloadHandlers: function () {
				return {
					types: ["image"],
					callback: function (item) {
						var id = item.src.toLowerCase().split("/").pop().split(".")[0];
						item.tag = document.getElementById(id);
					}
				};
			}
		}

		preload.installPlugin(plugin);
		preload.loadManifest(["Texas.jpg",
							  "BlueBird.png",
							  "Nepal.jpg",
							  "Autumn.png" //NOTE: Will not display
							 ]);
	}
</script>

</body>
</html>