溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
PreloadJS是一個用來管理和協調相關資源加載的類庫，它可以方便的幫助你預先加載相關資源，例如
圖片，文件，音頻，數據，其他
它使用了XHR2來提供實時的加載進度信息，如果不支持則使用標簽式的簡化進度來實現進度展示。
支持多隊列，多連接，暫停隊列等等功能
在PreloadJS中，LoadQueue是主要用來預加載內容的API。LoadQueue是一個加載管理器，可以預先加載一個文件或者一個文件隊列。
var queue = new createjs.LoadQueue(true);
以上代碼中，傳遞一個false參數則強制使用標簽式的加載。LoadQueue包含了以下幾個可以訂閱的事件：
complete: 當隊列完成全部加載后觸發
error: 當隊列遇到錯誤時觸發
progress: 整個隊列變化時展示的進度
fileload: 一個單獨文件加載完畢
fileprogress: 一個單獨文件變化的進度，請注意只有文件使用XHR加載才會觸發，其它只會顯示0或者100%
可以通過調用loadfile("文件路徑")加載一個文件或者調用loadMnifest()來加載多個文件。
LoadQueue支持相關文件類型如下：
BINARY: XHR調用的二進制文件
CSS: CSS文件
IMAGE: 一般圖片文件格式
JAVASCRIPT: JavaScript文件
JSON: JSON數據
JSONP: 跨域JSON文件
MANIFEST: JSON格式的文件列表
SOUND: 音頻文件
SVG: SVG文件
TEXT: 文本文件 - 僅支持XHR
XML: XML數據
代碼示例：
var canvas = document.getElementById("myCanvas");
var stage = new createjs.Stage(canvas);
var manifest;
var preload;
var progressText = new createjs.Text("", "20px Arial", "#dd4814");
progressText.x = 125 - progressText.getMeasuredWidth() / 2;
progressText.y = 20;
stage.addChild(progressText);
stage.update();
//定義相關JSON格式文件列表
function setupManifest() {
manifest = [{
src: "http://cdn.gbtags.com/EaselJS/0.7.1/easeljs.min.js",
id: "easeljs"
}, {
src: "https://cache.yisu.com/upload/information/20200622/114/7302.jpg",
id: "logo"
}, {
src: "http://www.gbtags.com/tutorials/html5-tutorial/html5-demos/assets/song.ogg",
id: "audiofile"
}
];
for(var i=1;i<=10;i++)
manifest.push({src:"http://www.gbtags.com/gb/laitu/200x200"})
}
//開始預加載
function startPreload() {
preload = new createjs.LoadQueue(true);
//注意加載音頻文件需要調用如下代碼行
preload.installPlugin(createjs.Sound);
preload.on("fileload", handleFileLoad);
preload.on("progress", handleFileProgress);
preload.on("complete", loadComplete);
preload.on("error", loadError);
preload.loadManifest(manifest);
}
//處理單個文件加載
function handleFileLoad(event) {
console.log("文件類型: " + event.item.type);
if(event.item.id == "logo"){
console.log("logo圖片已成功加載");
}
}
//處理加載錯誤：大家可以修改成錯誤的文件地址，可在控制臺看到此方法調用
function loadError(evt) {
console.log("加載出錯！",evt.text);
}
//已加載完畢進度
function handleFileProgress(event) {
progressText.text = "已加載 " + (preload.progress*100|0) + " %";
stage.update();
}
//全度資源加載完畢
function loadComplete(event) {
console.log("已加載完畢全部資源");
}
setupManifest();
startPreload();
更多關于PreloadJS使用方法請點擊下面的相關鏈接
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
