createjs之preloadjs概覽

Example

var queue = new createjs.LoadQueue();
 queue.installPlugin(createjs.Sound);
 queue.on("complete", handleComplete, this);
 queue.loadFile({id:"sound", src:"http://path/to/sound.mp3"});
 queue.loadManifest([
     {id: "myImage", src:"path/to/myImage.jpg"}
 ]);
 function handleComplete() {
     createjs.Sound.play("sound");
     var image = queue.getResult("myImage");
     document.body.appendChild(image);
 }

從上面這個代碼能大概的看出來，預加載大概分爲3步

• 實例化一個預加載對象

• 明確加載資源的路徑以及命名

  • 單個資源加載loadFile
  • 多個資源加載loadManifest

• 若是有須要能夠綁定加載各個過程的事件監聽程序

  • complete 隊列完成加載全部文件時觸發
  • progress 當整個隊列發生改變時觸發
  • fileload 單個文件完成加載時觸發
  • error 當隊列遇到任何錯誤時觸發
  • fileprogress 當隊列遇到任何文件的錯誤時觸發。

PreloadJS - LoadQueue Class

preloadjs最主要的類就是LoadQueue，接下來介紹一下LoadQueue常見的方法和使用方式，LoadQueue是加載管理器，能夠用來預加載單個文件或者是文件隊列

Creating a Queue 建立一個下載隊列

var queue = new createjs.LoadQueue(true);

LoadQueue的構造函數參數( [preferXHR=true] [basePath=""] [crossOrigin=""] )
Parameters:

• [preferXHR=true] Boolean optional
  true表示優先使用xhr加載，選擇false則優先經過html標籤進行加載，默認值是true
• [basePath=""] String optional
  對於須要加載的資源，在加載時，在資源路徑前面加上統一的參數，可是若是資源src是"http://www.xx.com"這種完整的url，或者是使用相對路徑中的../將不會增長參數
• [crossOrigin=""] String | Boolean optional
  一個可選的參數，用於支持啓用CORS的服務器加載圖像。我目前沒有發現這個參數有什麼用，由於咱們項目須要的圖片都是咱們本身的，並無調用其餘服務器的圖像，因此不存在跨域問題。

Listening for Event 添加下載相關的事件

5個事件監聽程序就是上面提到的，使用方法以下：

queue.on('fileload', handleFileLoad, this);
queue.on('complete', handleFileLoad, this);

Adding files and manifests 添加下載文件

添加單個文件經過loadFile, 或者一次性添加多個文件使用數組或者清單列表經過調用loadManifest，文件將會被添加到活動隊列，因此什麼時候何地均可以使用這些方法，由於加載資源共用同一個隊列，新建下載任務無非都加入了隊尾！

queue.loadFile('filePath/file.jpg');        // 添加單個文件使用loadFile方法，參數是相對路徑
queue.loadFile({
    id: 'image',
    src: 'filePath/file.jpg'                // 這種添加的方法主要是想給這副圖片綁定id，方便加載後使用
})
queue.loadManifest([                    // 這種添加方法，添加的就是資源數組，這個數組裏，無非是帶id不帶id的申明區別
    "filePath/file.jpg",
    {id: 'image', src: 'filePath/file.jpg'}
])

// 使用json做爲外部資源，這個json的格式可能就是咱們的資源數組的格式
queue.loadManifest('path/to/manifest.json');
queue.loadManifest({
    src: 'manifest.json', 
    type: 'manifest'                 //這裏要特殊說明一下文件類型
])

File Types 文件類型

清單項的文件類型由文件擴展名自動肯定。 PreloadJS 中的模式匹配應該處理大多數標準文件和 URL 格式，並使用常見的文件擴展名。 若是您具備非標準文件擴展名，或者使用代理腳本提供文件，則能夠使用任何清單項傳遞 type 屬性。
這個也就是上面使用json做爲外部資源時，爲何要聲明type的緣由！

queue.LoadFile({
    src: 'filePath/myFile.mp3x',
    type: createjs.Types.SOUND
])

queue.LoadFile({
    src: 'https://www.xiaomi.com?file=image.jpg',
    type: createjs.Types.IMAGE
})

這兩種「不合常理」的寫法分別解釋一下，第一種採用了mp3x文件拓展名，不是常規的拓展名，因此createjs不能自動識別，須要手動規定其解析類型；第二種，採用的是url，可是createjs不會嘗試從查詢字符串，也就是?file=image.jgp，中進行查詢，因此也是須要調用createjs.Types.IMAGE進行解析.
支持的類型定義：

• BINARY: Raw binary data via XHR
• CSS: CSS files
• IMAGE: Common image formats
• JAVASCRIPT: JavaScript files
• JSON: JSON data
• JSONP: JSON files cross-domain
• MANIFEST: A list of files to load in JSON format, see AbstractLoader/loadManifest
• SOUND: Audio file formats
• SPRITESHEET: JSON SpriteSheet definitions. This will also load sub-images, and provide a SpriteSheet - instance.
• SVG: SVG files
• TEXT: Text files - XHR only
• VIDEO: Video objects
• XML: XML data

Handling Results 處理結果

前面那幾個步驟目的在於初始化下載隊列，添加下載文件，包括添加下載各個過程的事件。那麼咱們文件下載好了以後呢？文件下載的目的確定是使用啊，那怎麼辦呢？讓咱們由淺入深往下看！、
文件下載完畢後，fileload事件會觸發。加載的文件一般是一個格式化的對象，並且能夠當即使用，看一下常見的文件格式加載後轉換爲能夠供咱們調用的文件格式：

• Binary: The binary loaded result
• CSS: A <link /> tag
• Image: An <img /> tag
• JavaScript: A <script /> tag
• JSON/JSONP: A formatted JavaScript Object
• Manifest: A JavaScript object.
• Sound: An <audio /> tag
• SpriteSheet: A SpriteSheet instance, containing loaded images.
• SVG: An <object /> tag
• Text: Raw text
• Video: A Video DOM node
• XML: An XML DOM node

來看一個官網的例子：

function handleFileLoad(event) {
     var queue = new createjs.LoadQueue(true);
     queue.on("fileload", handleFileLoad, this);

     queue.loadFile("filePath/file.jpg");

     var item = event.item; // 這個item就是 一個img對象，注意啊，這裏咱們綁定的是fileload事件，由於fileload事件定義就是一個文件加載就觸發
     var type = item.type;

     // Add any images to the page body.
     if (type == createjs.Types.IMAGE) {
         document.body.appendChild(event.result);
     }
 }

注意，與資源下載有關的那些事件的事件對象的屬性不盡相同，fileload擁有所有的事件對象屬性，差別能夠看一下官網：https://createjs.com/docs/pre...
這裏fileload的事件對象屬性以下：

getResult 使用加載後的文件

每當文件加載完畢，咱們能夠經過使用getResult(id)；來訪問咱們的文件，若是沒有提供id值，那麼能夠輸入src或者文件的路徑，依然能夠訪問。若是要查找內容，建議始終傳遞ID。不要給本身找麻煩。

var image = queue.getResult("image");   // image已是img對象了
 document.body.appendChild(image);

想要訪問文件的二進制數據怎麼辦？一種是使用fileload事件的事件對象的rawResult屬性，或者是直接在getResult方法第二個參數加一個true。 這僅適用於已爲瀏覽器解析的內容，特別是：JavaScript，CSS，XML，SVG 和 JSON 對象，或任何使用 XHR 加載的內容

var image = queue.getResult("image", true); // load the binary image data loaded with XHR.