html5预加载资源,preloadjs实现网页资源预加载

PreloadJS的基础使用

varcanvas=document.getElementById("myCanvas");varstage= newcreatejs.Stage(canvas);varmanifest;varpreload;varprogressText= newcreatejs.Text("","20px Arial","#dd4814");

progressText.x= 125 -progressText.getMeasuredWidth()/ 2;

progressText.y= 20;

stage.addChild(progressText);

stage.update();//定义相关JSON格式文件列表

functionsetupManifest() {

manifest=[{

src:"/images/test.png",

id:"easeljs"}, {

src:"http://www.gbtags.com/gb/networks/uploadimgthumb/4d8f3f13-89c0-455c-95f3-ba5120c2f123.jpg",

id:"logo"}, {

src:"http://www.gbtags.com/tutorials/html5-tutorial/html5-demos/assets/song.ogg",

id:"audiofile"}

];for(vari= 1; i<= 25; i++)

manifest.push({ src:"/images/"+i+".png"})

}//开始预加载

functionstartPreload() {

preload= newcreatejs.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);

}//处理单个文件加载

functionhandleFileLoad(event) {

console.log("文件类型:" +event.item.type);if(event.item.id== "logo") {

console.log("logo图片已成功加载");

}

}//处理加载错误：大家可以修改成错误的文件地址，可在控制台看到此方法调用

functionloadError(evt) {

console.log("加载出错！", evt.text);

}//已加载完毕进度

functionhandleFileProgress(event) {

progressText.text= "已加载" +(preload.progress* 100 | 0)+ "%";

stage.update();

}//全度资源加载完毕

functionloadComplete(event) {

console.log("已加载完毕全部资源");

}

setupManifest();

startPreload();