當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
使用PreloadJS加载图片资源
生活随笔
收集整理的這篇文章主要介紹了
使用PreloadJS加载图片资源
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一. 使用createjs里的LoadQueue函數(shù)實(shí)現(xiàn)異步加載圖片,監(jiān)聽加載進(jìn)度
1.實(shí)例對象LoadQueue加載隊(duì)列對象
var queue = new createjs.LoadQueue(false);2.需要監(jiān)聽常用到的三個方法
//監(jiān)聽進(jìn)度事件 queue.on("progress", function (e) {}); //監(jiān)聽加載事件 queue.on("fileload", function (e) {}); //監(jiān)聽完成事件 queue.on("complete", function (e) {});3.實(shí)現(xiàn)監(jiān)聽進(jìn)度
html代碼: <h2>loading...<span id="progress">0%</span></h2> js代碼: //監(jiān)聽進(jìn)度事件 queue.on("progress", function(e){var proNum = Math.ceil(e.progress * 100);$("#progress").html( proNum + "%"); });4.添加加載資源
//加載單個圖片 queue.loadFile("images/arrow.png"); //加載單個圖片,帶id queue.loadFile({id: "img1", src:"images/slide3-bg.png"}); //加載多個文件,指定目錄下 queue.loadManifest(["slide1-bg.png","slide2-bg.png","slide3-bg.png" ], true, "images/");5.獲取加載完的資源
queue.on("fileload", function (e) {document.body.appendChild(e.result); });二:完整的代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>PreloadJs加載圖片</title> </head> <body> <div id="img"></div> <h2>loading...<span id="progress">0%</span></h2> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js"></script> <script>var queue = new createjs.LoadQueue(false);//監(jiān)聽進(jìn)度事件queue.on("progress", function(e){var proNum = Math.ceil(e.progress * 100);$("#progress").html( proNum + "%");});//監(jiān)聽完成事件queue.on("complete", function(){console.log("加載完成");console.log(queue.getResult("img1"));});//加載單個圖片queue.loadFile("images/arrow.png");//加載單個圖片,帶idqueue.loadFile({id: "img1", src:"images/slide3-bg.png"});//加載多個文件,指定目錄下queue.loadManifest(["slide1-bg.png","slide2-bg.png","slide3-bg.png"], true, "images/");queue.on("fileload", function (e) {document.body.appendChild(e.result);}); </script> </body> </html>
轉(zhuǎn)載于:https://www.cnblogs.com/300js/p/7998212.html
總結(jié)
以上是生活随笔為你收集整理的使用PreloadJS加载图片资源的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 上传图片即时显示图片
- 下一篇： Spring Cloud 各组件调优参数