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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
react 创建单例组件的方法
Apr 26 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
JS回调函数深入理解
Oct 16 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
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
如何做到多笔资料的同步
2006/10/09 PHP
php图片验证码代码
2008/03/27 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
jquery解析JSON数据示例代码
2014/03/17 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python----数据预处理代码实例
2019/03/20 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
就业自荐信
2013/12/04 职场文书
公司授权委托书范本
2014/04/03 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
医德医风自我评价2015
2015/03/03 职场文书
如何利用python创作字符画
2022/06/25 Python