资源预加载----preload
发布在前端菜鸟自学2015年10月25日view:4939YiksiAssowBrettBat
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

preload

资源预加载组件

  • 队列,可以支持队列加载和回调,也可以加载视频或者音频
  • 支持同步或异步获取数据
  • 进度条,可以动态获取进度条信息
  • 支持img标签的预加载,添加pSrc属性即可

Install

git clone https://github.com/jayZOU/preload/tree/dev
npm install
gulp

访问http://localhost:8080/

Examples

    <img pSrc="./src/image/b1.jpg" alt="">
    <img pSrc="./src/image/b2.jpg" alt="">
    <img pSrc="./src/image/b3.jpg" alt="">
    <img pSrc="./src/image/b4.jpg" alt="">
    /**
    *   Preload 资源预加载组件
    *   @author jayzou
    *   @time 2015-10-25
    *   @version 1.0.1
    *   @class Preload
    *   @param {object} sources     必填  加载队列容器,支持队列加载以及加载一个队列后传入回调
    *   @param {object} connector   选填  后台数据接口,可选择同步或异步
    *   @param {object} wrap        选填  进度条容器,返回记载进度信息
    **/

    var preload = new Preload({
        sources: {
            imgs:{
                source:[
                    "./src/image/b2.jpg",
                    "./src/image/b1.jpg"
                ],
                callback: function(){
                    alert("队列1完成");
                }
            },
            audio:{
                source:[
                    "./src/audio/a.mp3",
                    "./src/audio/b.mp3"
                ]
            },
            imgs2:{
                source:[
                    "./src/image/b3.jpg",
                    "./src/image/b4.jpg",
                    "http://7xl041.com1.z0.glb.clouddn.com/OrthographicCamera.png",
                    "http://7xl041.com1.z0.glb.clouddn.com/audio.gif",
                ],
                callback: function(){
                    alert("队列3完成");
                }
            }
        },
        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
            }
        },
        progress: function(completedCount, total){
            console.log(Math.floor((completedCount / total) * 100));
        }
    });

    function read(){
        console.log(arguments[0])
    }

Notes

  • 队列名称不能重名,否则后面的队列会覆盖前面
评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
前端菜鸟自学

分享一些学习经历和一些教程

我的收藏