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 相关文章推荐
30个经典的jQuery代码开发技巧
Dec 15 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
在react中使用vue的状态管理的方法示例
May 02 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
javascript 图片裁剪技巧解读
2012/11/15 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
Python translator使用实例
2008/09/06 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
新闻发布会主持词
2014/03/28 职场文书
小学生综合素质评语
2014/04/23 职场文书
企业安全生产承诺书
2014/05/22 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
养成教育主题班会
2015/08/13 职场文书
Python编写冷笑话生成器
2022/04/20 Python