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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
微信jssdk用法汇总
Jul 16 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jenkins自动构建发布vue项目的方法步骤
Jan 04 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
List the Codec Files on a Computer
2007/06/18 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
js实现日期级联效果
2014/01/23 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python模拟登陆实现代码
2017/06/14 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Django工程的分层结构详解
2019/07/18 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
法雷奥SQA(electric)面试问题
2016/01/23 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
个人总结格式范文
2015/03/09 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
element多个表单校验的实现
2021/05/27 Javascript
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL