没事撸个插件玩–预加载插件(f-preload)

原生无依靠，预加载插件

插件名：f-preload
完成的主要功能:
1、批量预加载多个图片
2、支撑debug打印加载信息
3、支撑加载完实行自定义回调函数

项目github地点https://github.com/ifir/f-preload列位客长赏个star，示意很高兴

怎样运用

1、页面引入

<script src="youpath/f-preload.js"></script>

var Fpreload = new Fpreload({
    source: Array,  //图片src数组(required)
    debug : Boolean,  //默许false
    callback : Function //默许null
});

or:

2、npm装置

npm install –save f-preload

var Fpreload = require('f-preload');
var preload = new Fpreload({
    source: Array,  //图片src数组(required)
    debug : Boolean,  //默许false
    callback : Function //默许null
});

道理诠释：

一句话诠释:应用img.src提议http要求
看看中心代码

imgloader:function(){
    var _this = this,
        img = [],
        source = _this.source,
        sucNum = _this.sucNum;
    _this.asyncNum = 0;//计数器
    for(var i = 0; i < _this.length; i++){
        //实例
        img[i] = new Image();
        //加载
        img[i].src = source[i];
        //加载完成
        img[i].onload = function(){
            _this.sucNum++;
            _this.asyncNum++;
            if(_this.sucNum == _this.length){
                if(typeof _this.callback === 'function'){
                    _this.callback();
                }else{
                    console.log('Preloader Complete');
                }
            }
            //log打印
            _this.debug && _this.msglog();
        };
        //加载失利
        img[i].onerror = function(){
            _this.errNum++;
            _this.asyncNum++;
            _this.errArr.push(this.src);
            //log打印
            _this.debug && _this.msglog();
        }
    }
}

这里申明一下onload指图片加载完成,onerror不诠释,还要申明一下onload是异步的,为了debug形式在所有的图片onload和onerror以后在打印加载图片的信息。另有自定义回调函数只要在所有图片都加载胜利才会实行，而不是一张图片加载胜利就实行。

debug形式用开辟时纪录图片的加载信息

console.log很熟悉吧,下面的不知道的赶忙度娘一下吧
console.group
console.time
console.info
console.warn
console.error

预报

下篇文章就写这个插件f-lazyload,我已写了差不多了,是个懒加载插件
详细细节先去github看一吧[f-lazyload堆栈](https://github.com/ifir/f-lazyload)
主要的事变说三遍star,star,star你的支撑就是动力