JavaScript资源预加载组件和滑屏组件的使用推荐


Posted in Javascript onMarch 10, 2016

资源预加载组件——preload

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

Install:

git clone https://github.com/jayZOU/preload.git
npm install
npm 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" 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])
  }

Notes
队列名称不能重名,否则后面的队列会覆盖前面
ES6模式编写,队列之间同步加载,队列内资源为异步加载

滑屏组件——slide

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

Install:

git clone https://github.com/jayZOU/slide.git
npm install
gulp

访问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

Javascript 相关文章推荐
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
Paypal支付不完全指北
Jun 04 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
node.js实现爬虫教程
Aug 25 #Javascript
ES6中如何使用Set和WeakSet
Mar 10 #Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 #Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 #Javascript
基于javascript制作微信聊天面板
Aug 09 #Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 #Javascript
TypeScript Type Innference(类型判断)
Mar 10 #Javascript
You might like
PHP 变量的定义方法
2010/01/26 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
Add Formatted Text to a Word Document
2007/06/15 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
详解python中list的使用
2019/03/15 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
2016教师读书思廉心得体会
2016/01/23 职场文书
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技