Use of JavaScript resource preload components and slide-screen assemblies recommended _javascript tips

Resource pre-loading component--preload

• Queues to support queue loading and callbacks, or to load video or audio
• Progress bar, you can dynamically get progress bar information
• Support for pre-loading of IMG tags, add psrc properties
• Native ES5
• Demo

Install:

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

Visit 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>    /** * Preload resource preload component * @author Jayzou * @time 2016-1-12 * @version 1.0.6        * @class preload * @param {object} sources the required load queue container, support queue loading and incoming callback * @param {Boolean} after loading a queue isdebug Select whether to turn on the debug option for mobile-side debugging, default False * @param {object} connector selected background data interface, optionally synchronous or asynchronous * @param int Loadingover  Time optional preload timeout, default 15, unit: Seconds * @param {object} LOADINGOVERTIMECB optional preload timeout callback * @param {object} wrap Optional Progress bar container, returns record progress information * @param {object} completeload optional completes all add-in execution callbacks, including same, asynchronous fetch data **/var preload = new preload ({i Sdebug:true, sources: {imgs: {
        Source: [". /public/image/b2.jpg ",".
        /public/image/b1.jpg "], callback:function () {console.log (" Queue 1 complete "); }, Audio: {source: []. /public/audio/a.mp3 ",". /public/audio/b.mp3 "]}, Imgs2: {source: [...] /public/image/b3.jpg ",".
        /public/image/b4.jpg "," yun_qi_img/orthographiccamera.jpg "," Yun_qi_img/audio.gif ",],
        Callback:function () {Console.log ("Queue 3 complete");
    }}, Loadingovertime:3, Loadingovertimecb:function (res) {Console.log ("Resource Load timeout:", res); }, connector: {int1: {url: ' http://localhost/test/index.php?callback=read&city= Shanghai city ', JSONP : true}, Int2: {url: ' http://localhost/test/index.php?callback=read&city= shenzhen ', JSONP:FA LSE, Callback:function (data) {Console.log ("Sync: ", data);
      }}, Progress:function (Completedcount, total) {//Console.log (total);
    Console.log (Math.floor (completedcount/total) * 100));
    }, Completeload:function () {Console.log ("All add-ons completed");

  }
  });

 function Read () {Console.log ("async:", Arguments[0])}

Notes
The queue name cannot be duplicate, or the queue behind will overwrite the front
ES6 mode writing, synchronous loading between queues, and asynchronous loading of resources within the queue

Slide Screen Assembly--slide

• Custom sliding screen components, customizable slide-screen animation
• Can control the animation effect of each screen

Install:

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

Visit http://localhost:8080/

Examples all copies into notes/** * Slide Slider assembly * @author Jayzou * @time 2015-10-25 * @version 0.0.1 * @class Slide * @param string wrap the required incoming sliding container ID * @param String currentclass Toggle Animation class When selected for sliding, default current * @param Boolean Startlocalstorage Select Record Current Browsing page * @param {object} onChange optional switch complete callback * @param {object} Ondownchan
  GE fill Down callback * @param {object} onupchange on completion of callback * @param {object} defaultclass optional sliding process animation effect **/var slide = new Slide ({wrap: ' wrap ',//required, incoming sliding container ID currentclass: ' current ',///optional, toggle animation when sliding Clas s startlocalstorage:false,//optional, whether to open the Localstorage record page returned to the last visited page, the default false Onchange:function () {//optional, each screen cut
    The callback Console.log ("onchange") at the end of the change;
    }, Ondownchange:function () {//optional, the fall is completed when the callback Console.log ("Ondownchange");
    }, Onupchange:function () {///optional, back Console.log ("Onupchange") upon completion of the slide; }, Defaultclass: {//optional, sliding process animation effect 'Webkittransition ': '-webkit-transform 0.5s ease ',//need prefix ' transform ': ' Translate (0px, 0px) '//no prefix required

  },
  });            Slide.next ();            Next page//Slide.prev ();            Prev//Slide.playto (3);    Direct jump Nth page//Console.log (Slide.getpage ());          Gets the current number of pages//Slide.lockpage ();          Lock screen, no sliding//slide.unlockpage ();  Unlock screen, allow sliding//auxiliary class//Slide.toggleclass (Targ, className);    Replacement class//Slide.addclass (Targ, className);  Add Class//Slide.removeclass (Targ, className);          Delete class//Slide.css (o, Style);

 Add Style Style

The

Notes
Sliding container can only pass in ID values, not incoming class