4、CreateJS介绍-PreLoadJS

需要在html5文件中引入的CreateJS库文件是preloadjs-0.4.1.min.js

HTML5文件如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>4、CreateJS介绍-PreLoadJS</title>
 6     <script src="preloadjs-0.4.1.min.js"></script>
 7     <style>
 8         .image{
 9             max-width: 320px;
10             max-height: 240px;
11             border: 1px solid #555;
12             margin: 5px;
13         }
14     </style>
15 </head>
16 <body>
17     <img class="image" id="winter" />
18     <img class="image" id="spring" />
19     <img class="image" id="summer" />
20 
21     <script src="app.js"></script>
22 </body>
23 </html>

在HTML5文件中引入的app.js文件源码如下：

 1 /**
 2  * create 4、CreateJS介绍-PreLoadJS-app.js by dpp on 2016/1/4
 3  * @authors Your Name (you@example.org)
 4  * @date    2016-01-04 01:32:58
 5  * @version $Id$
 6  */
 7 
 8 var preload;
 9 preload = new createjs.LoadQueue(false , 'images/');
10 
11 var plugin = {
12     getPreloadHandlers:function(){
13         return{
14             type:['image'],
15             callback:function(src){
16                 var id = src.toLowerCase().split('/').pop().split('.')[0];
17                 var img = document.getElementById(id);
18                 return {tag:img};
19             }
20         }
21     }
22 }
23 
24 preload.installPlugin(plugin);
25     preload.loadManifest([
26             'banner.gif',
27             'spring.jpg',
28             'summer.jpg',
29             'winter.jpg'
30         ]);

还需引入一个MP3文件夹用来存放图片

 例子"4、CreateJS介绍-PreLoadJS"的源码地址：https://github.com/daipianpian/CreateJS-Study/tree/master/1%E3%80%81CreateJS%E4%BB%8B%E7%BB%8D/L04_PreLoadJS

posted @ 2016-01-12 12:57  竹立荷塘  阅读(993)  评论(0)  编辑  收藏  举报