首页 / 脚本样式 / JavaScript / JavaScript资源预加载组件和滑屏组件的使用推荐

• 队列，可以支持队列加载和回调，也可以加载视频或者音频
• 进度条，可以动态获取进度条信息
• 支持img标签的预加载，添加pSrc属性即可
• 原生ES5
• demo

git clone https://github.com/jayZOU/preload.gitnpm installnpm run es6

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 资源预加载组件*@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]）}

• 自定义滑屏组件，可定制滑屏动画
• 可控制每屏动画效果

git clone https://github.com/jayZOU/slide.gitnpm installgulp

Examples全选复制放进笔记/***slide 滑屏组件*@author jayzou*@time 2015-10-25*@version 0.0.1*@class Slide*@param Stringwrap必填传入滑动容器ID*@param StringcurrentClass选填滑动时切换动画class，默认current*@param booleanstartLocalstorage选填记录当前浏览页面*@param {Object} onChange选填切换完成回调*@param {Object} onDownChange选填下滑完成时回调*@param {Object} onUpChange 选填上滑完成时回调*@param {Object} defaultClass选填滑动过程动画效果**/var slide = new Slide（{wrap: "wrap",//必填，传入滑动容器IDcurrentClass: "current",//选填，滑动时切换动画classstartLocalstorage: false,//选填，是否开启localstorage记录页面返回后是否回到上次访问的页面，默认falseonChange: 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样式