JavaScript資源預(yù)加載組件和滑屏組件的使用推薦
資源預(yù)加載組件——preload
- 隊(duì)列,可以支持隊(duì)列加載和回調(diào),也可以加載視頻或者音頻
- 進(jìn)度條,可以動(dòng)態(tài)獲取進(jìn)度條信息
- 支持img標(biāo)簽的預(yù)加載,添加pSrc屬性即可
- 原生ES5
- demo
Install:
git clone https://github.com/jayZOU/preload.git npm install npm run es6
訪問(wèn)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" alt=""> <img pSrc="../public/image/b2.jpg" alt=""> <img pSrc="../public/image/b3.jpg" alt=""> <img pSrc="../public/image/b4.jpg" alt=""> /** * Preload 資源預(yù)加載組件 * @author jayzou * @time 2016-1-12 * @version 1.0.6 * @class Preload * @param {object} sources 必填 加載隊(duì)列容器,支持隊(duì)列加載以及加載一個(gè)隊(duì)列后傳入回調(diào) * @param {boolean} isDebug 選填 是否開(kāi)啟debug選項(xiàng),用于移動(dòng)端調(diào)試,默認(rèn)false * @param {object} connector 選填 后臺(tái)數(shù)據(jù)接口,可選擇同步或異步 * @param int loadingOverTime 選填 預(yù)加載超時(shí)時(shí)間,默認(rèn)15, 單位:秒 * @param {object} loadingOverTimeCB 選填 預(yù)加載超時(shí)回調(diào) * @param {object} wrap 選填 進(jìn)度條容器,返回記載進(jìn)度信息 * @param {object} completeLoad 選填 完成所有加載項(xiàng)執(zhí)行回調(diào),包括同、異步獲取數(shù)據(jù) **/ var preload = new Preload({ isDebug: true, sources: { imgs: { source: [ "../public/image/b2.jpg", "../public/image/b1.jpg" ], callback: function() { console.log("隊(duì)列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("隊(duì)列3完成"); } } }, loadingOverTime: 3, loadingOverTimeCB: function(res) { console.log("資源加載超時(shí):", 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("已完成所有加載項(xiàng)"); } }); function read() { console.log("異步:", arguments[0]) }
Notes
隊(duì)列名稱(chēng)不能重名,否則后面的隊(duì)列會(huì)覆蓋前面
ES6模式編寫(xiě),隊(duì)列之間同步加載,隊(duì)列內(nèi)資源為異步加載
滑屏組件——slide
- 自定義滑屏組件,可定制滑屏動(dòng)畫(huà)
- 可控制每屏動(dòng)畫(huà)效果
Install:
git clone https://github.com/jayZOU/slide.git npm install gulp
訪問(wèn)http://localhost:8080/
Examples 全選復(fù)制放進(jìn)筆記 /** * slide 滑屏組件 * @author jayzou * @time 2015-10-25 * @version 0.0.1 * @class Slide * @param String wrap 必填 傳入滑動(dòng)容器ID * @param String currentClass 選填 滑動(dòng)時(shí)切換動(dòng)畫(huà)class,默認(rèn)current * @param boolean startLocalstorage 選填 記錄當(dāng)前瀏覽頁(yè)面 * @param {Object} onChange 選填 切換完成回調(diào) * @param {Object} onDownChange 選填 下滑完成時(shí)回調(diào) * @param {Object} onUpChange 選填 上滑完成時(shí)回調(diào) * @param {Object} defaultClass 選填 滑動(dòng)過(guò)程動(dòng)畫(huà)效果 **/ var slide = new Slide({ wrap: 'wrap', //必填,傳入滑動(dòng)容器ID currentClass: 'current', //選填,滑動(dòng)時(shí)切換動(dòng)畫(huà)class startLocalstorage: false, //選填,是否開(kāi)啟localstorage記錄頁(yè)面返回后是否回到上次訪問(wèn)的頁(yè)面,默認(rèn)false onChange: function(){ //選填,每屏切換完成時(shí)的回調(diào) console.log("onchange"); }, onDownChange: function(){ //選填,下滑完成時(shí)回調(diào) console.log("onDownChange"); }, onUpChange: function(){ //選填,上滑完成時(shí)回調(diào) console.log("onUpChange"); }, defaultClass: { //選填,滑動(dòng)過(guò)程動(dòng)畫(huà)效果 'webkitTransition': '-webkit-transform 0.5s ease', //需要加前綴 'transform': 'translate(0px, 0px)' //不需要加前綴 }, }); // slide.next(); //下一頁(yè) // slide.prev(); //上一頁(yè) // slide.playTo(3); //直接跳轉(zhuǎn)第n頁(yè) // console.log(slide.getPage()); //獲取為當(dāng)前頁(yè)數(shù) // slide.lockPage(); //鎖住屏幕,禁止滑動(dòng) // slide.unLockPage(); //解鎖屏幕,允許滑動(dòng) //輔助類(lèi) // slide.toggleClass(targ, className); //置換class // slide.addClass(targ, className); //添加class // slide.removeClass(targ, className); //刪除class // slide.css(o, style); //添加style樣式
Notes
滑動(dòng)容器只能傳入ID值,不允許傳入class
- Hammer.js+輪播原理實(shí)現(xiàn)簡(jiǎn)潔的滑屏功能
- javascript單頁(yè)面手勢(shì)滑屏切換原理詳解
- AngularJS仿蘋(píng)果滑屏刪除控件
- javascript實(shí)現(xiàn)鎖定網(wǎng)頁(yè)、密碼解鎖效果(類(lèi)似系統(tǒng)屏幕保護(hù)效果)
- javascript實(shí)現(xiàn)滑動(dòng)解鎖功能
- javascript實(shí)現(xiàn)滑動(dòng)解鎖功能
- jQuery使用unlock.js插件實(shí)現(xiàn)滑動(dòng)解鎖
- 純JavaScript代碼實(shí)現(xiàn)移動(dòng)設(shè)備繪圖解鎖
- js+html5實(shí)現(xiàn)手機(jī)九宮格密碼解鎖功能
- js實(shí)現(xiàn)類(lèi)似iphone的網(wǎng)頁(yè)滑屏解鎖功能示例【附源碼下載】
相關(guān)文章
javascript 產(chǎn)生隨機(jī)數(shù)的幾種方法總結(jié)
這篇文章主要介紹了javascript 產(chǎn)生隨機(jī)數(shù)的幾種方法總結(jié)的相關(guān)資料,希望通過(guò)本文大家能夠掌握如何實(shí)現(xiàn)這樣的方法,需要的朋友可以參考下2017-09-09js借助ActiveXObject實(shí)現(xiàn)創(chuàng)建文件
創(chuàng)建文件的方法有很多,在本文為大家詳細(xì)介紹下js中時(shí)如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)了2013-09-09把JS與CSS寫(xiě)在同一個(gè)文件里的書(shū)寫(xiě)方法
把JS與CSS寫(xiě)在同一個(gè)文件里的書(shū)寫(xiě)方法...2007-06-06VSCode中如何利用d.ts文件進(jìn)行js智能提示
這篇文章主要給大家介紹了關(guān)于VSCode中如何利用d.ts文件進(jìn)行js智能提示的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2018-04-04微信小程序云開(kāi)發(fā)使用方法新手初體驗(yàn)
微信小程序云開(kāi)發(fā)使用方法新手初體驗(yàn),開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲,無(wú)需搭建服務(wù)器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05Bootstrap編寫(xiě)一個(gè)兼容主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面
這篇文章主要介紹了Bootstrap編寫(xiě)一個(gè)兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面,感興趣的小伙伴們可以參考一下2016-07-07