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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
小程序实现侧滑删除功能
Jun 25 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
javascript时区函数介绍
2012/09/14 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
python实现复制整个目录的方法
2015/05/12 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python实现统计代码行的方法分析
2017/07/12 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
Python之list对应元素求和的方法
2018/06/28 Python
python 除法保留两位小数点的方法
2018/07/16 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
军训自我鉴定
2014/01/22 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
500字作文之周记
2019/12/13 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server