Maison  >  Article  >  interface Web  >  Utilisation recommandée des composants de préchargement de ressources JavaScript et des compétences en composants d'écran coulissant_javascript

Utilisation recommandée des composants de préchargement de ressources JavaScript et des compétences en composants d'écran coulissant_javascript

WBOY
WBOYoriginal
2016-05-16 15:11:061295parcourir

Composant de préchargement des ressources——préchargement

  • File d'attente, qui peut prendre en charge le chargement et le rappel de la file d'attente, et peut également charger de la vidéo ou de l'audio
  • Barre de progression, vous pouvez obtenir dynamiquement des informations sur la barre de progression
  • Prend en charge le préchargement des balises img, ajoutez simplement l'attribut pSrc
  • Natif ES5
  • démo

Installer :

git clone https://github.com/jayZOU/preload.git
npm install
npm run es6

Visitez 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&#63;callback=read&city=上海市',
        jsonp: true
      },
      int2: {
        url: 'http://localhost/test/index.php&#63;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])
  }

Remarques
Les noms de file d'attente ne peuvent pas avoir le même nom, sinon la file d'attente suivante écrasera la précédente
Écrit en mode ES6, chargement synchrone entre les files d'attente et chargement asynchrone des ressources dans la file d'attente


Composant d'écran coulissant——glisser

  • Composant d'écran coulissant personnalisé, animation d'écran coulissant personnalisable
  • Peut contrôler l'effet d'animation de chaque écran

Installer :

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

Visitez 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样式

Remarques
Le conteneur coulissant ne peut transmettre que la valeur ID, pas la classe

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn