PreloadJS/examples/CustomLoader.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
	<title>PreloadJS: Custom Loader</title>

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

	<style type="text/css">
		#template {
			display:none;
		}
	</style>
</head>
<body onload="init()">

	<header id="header" class="PreloadJS">
	    <h1><span class="text-product">Preload<strong>JS</strong></span> Custom Loaders in Plugins</h1>
	    <p>This sample shows how to a plugin can provide a custom loader to PreloadJS. This enables plugins to
        create their own loader classes and instances (and add listeners or additional functionality), but rely
        on PreloadJS to manage everything else.</p>

        <p>This example uses a simple image loader, and the plugin has an opportunity to modify it once it is loaded
        (by setting the image size).</p>
	</header>

    <script type="text/javascript" src="../lib/preloadjs-NEXT.js"></script>

    <script type="text/javascript">

        // The custom loader "class"
        (function() {

            function CustomLoader(item) {
                this.AbstractLoader_constructor(item, false, "loader");
                this.img = null;
            }

            // Static Plugin Methods
            CustomLoader.getPreloadHandlers = function() {
                return {
                    types: ["image"],
                    callback: CustomLoader.preloadHandler
                };
            };
            CustomLoader.preloadHandler = function(loadItem) {
                var loader = new CustomLoader(loadItem);
                loader.on("complete", CustomLoader.handleComplete, CustomLoader);
                return loader;
            };
            CustomLoader.handleComplete = function(event) {
                var img = event.result;
                img.width = img.height = 200;
            };

            // Loader Methods
            var p = createjs.extend(CustomLoader, createjs.AbstractLoader);
            p.load = function() {
                this.img = new Image();
                this.img.onload = createjs.proxy(this.handleLoad, this);
                this.img.src = this._item.src;
            };
            p.handleLoad = function() {
                this._result = this.img;
                this._sendComplete();
            };
            window.CustomLoader = createjs.promote(CustomLoader, "AbstractLoader");

        }())


        function init() {
            if (window.top != window) {
                document.getElementById("header").style.display = "none";
            }

            var loader = new createjs.LoadQueue();
            loader.installPlugin(CustomLoader);
            loader.loadFile("../_assets/art/Autumn.png")
            loader.on("fileload", handleFileLoad);
            loader.load();
        }

        function handleFileLoad(event) {
            console.log(event);
            document.body.appendChild(event.result);
        }

    </script>

</body>
</html>