資源預加載組件——preload
- 隊列，可以支持隊列加載和回調，也可以加載視頻或者音頻
- 進度條，可以動態獲取進度條信息
- 支持img標簽的預加載，添加pSrc屬性即可
- 原生ES5
- demo
Install：
git clone https://github.com/jayZOU/preload.gitnpm installnpm run es6
訪問http://localhost:8080/es6-demo
Examples <audio pSrc="../public/audio/a.mp3" preload="auto" controls></audio> <audio pSrc="../public/audio/b.mp3" preload="auto" controls></audio> <img pSrc="../public/image/b1.jpg" <img pSrc="../public/image/b2.jpg" <img pSrc="../public/image/b3.jpg" <img pSrc="../public/image/b4.jpg" /** * Preload 資源預加載組件 * @author jayzou * @time 2016-1-12 * @version 1.0.6 * @class Preload * @param {object} sources 必填 加載隊列容器，支持隊列加載以及加載一個隊列后傳入回調 * @param {boolean} isDebug 選填 是否開啟debug選項，用于移動端調試，默認false * @param {object} connector 選填 后臺數據接口，可選擇同步或異步 * @param int loadingOverTime 選填 預加載超時時間，默認15， 單位:秒 * @param {object} loadingOverTimeCB 選填 預加載超時回調 * @param {object} wrap 選填 進度條容器，返回記載進度信息 * @param {object} completeLoad 選填 完成所有加載項執行回調，包括同、異步獲取數據 **/ var preload = new Preload({ isDebug: true, sources: { imgs: { source: [ "../public/image/b2.jpg", "../public/image/b1.jpg" ], callback: function() { console.log("隊列1完成"); } }, audio: { source: [ "../public/audio/a.mp3", "../public/audio/b.mp3" ] }, imgs2: { source: [ "../public/image/b3.jpg", "../public/image/b4.jpg", "http://7xl041.com1.z0.glb.clouddn.com/OrthographicCamera.png", "http://7xl041.com1.z0.glb.clouddn.com/audio.gif", ], callback: function() { console.log("隊列3完成"); } } }, loadingOverTime: 3, loadingOverTimeCB: function(res) { console.log("資源加載超時：", res); }, connector: { int1: { url: 'http://localhost/test/index.php?callback=read&city=上海市', jsonp: true }, int2: { url: 'http://localhost/test/index.php?callback=read&city=深圳市', jsonp: false, callback: function(data) { console.log("同步：", data); } } }, progress: function(completedCount, total) { // console.log(total); console.log(Math.floor((completedCount / total) * 100)); }, completeLoad: function() { console.log("已完成所有加載項"); } }); function read() { console.log("異步：", arguments[0]) } Notes
隊列名稱不能重名，否則后面的隊列會覆蓋前面
ES6模式編寫，隊列之間同步加載，隊列內資源為異步加載
滑屏組件——slide
- 自定義滑屏組件，可定制滑屏動畫
- 可控制每屏動畫效果
Install：
git clone https://github.com/jayZOU/slide.gitnpm installgulp
訪問http://localhost:8080/
Examples全選復制放進筆記 /** * slide 滑屏組件 * @author jayzou * @time 2015-10-25 * @version 0.0.1 * @class Slide * @param String wrap 必填 傳入滑動容器ID * @param String currentClass 選填 滑動時切換動畫class，默認current * @param boolean startLocalstorage 選填 記錄當前瀏覽頁面 * @param {Object} onChange 選填 切換完成回調 * @param {Object} onDownChange 選填 下滑完成時回調 * @param {Object} onUpChange 選填 上滑完成時回調 * @param {Object} defaultClass 選填 滑動過程動畫效果 **/ var slide = new Slide({ wrap: 'wrap', //必填，傳入滑動容器ID currentClass: 'current', //選填，滑動時切換動畫class startLocalstorage: false, //選填，是否開啟localstorage記錄頁面返回后是否回到上次訪問的頁面，默認false onChange: function(){ //選填，每屏切換完成時的回調 console.log("onchange"); }, onDownChange: function(){ //選填，下滑完成時回調 console.log("onDownChange"); }, onUpChange: function(){ //選填，上滑完成時回調 console.log("onUpChange"); }, defaultClass: { //選填，滑動過程動畫效果 'webkitTransition': '-webkit-transform 0.5s ease', //需要加前綴 'transform': 'translate(0px, 0px)' //不需要加前綴 }, }); // slide.next(); //下一頁 // slide.prev(); //上一頁 // slide.playTo(3); //直接跳轉第n頁 // console.log(slide.getPage()); //獲取為當前頁數 // slide.lockPage(); //鎖住屏幕，禁止滑動 // slide.unLockPage(); //解鎖屏幕，允許滑動 //輔助類 // slide.toggleClass(targ, className); //置換class // slide.addClass(targ, className); //添加class // slide.removeClass(targ, className); //刪除class // slide.css(o, style); //添加style樣式 Notes
滑動容器只能傳入ID值，不允許傳入class
