图片预加载(loading.js)

【实例简介】

封装图片预加载功能，便于直接调用

【使用方法】

//使用方式：
//   var imgs = [];     //存放图片地址的数组
//  $.Load(imgs ,{
//      order : 'unordered',         //是否有序预加载，默认无序unordered,有序为ordered
//      each : function(count){
//          每张图片加载完成的操作
//      },
//      all : function(){
//          所有图片加载完成之后的操作
//      }
// })

【核心代码】

(function ($) {
    function UnorderedLoad(imgs , options){
        this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
        this.opts = $.extend({}, UnorderedLoad.defaults, options);   //后两个对象融合生成新的{}对象（即第三个覆盖第二个，生成第一个对象），返回给this.opts保存

        if(this.opts.order === 'ordered'){
            this.ordered();
        }else{
            this.unordered();
        }
    };
    UnorderedLoad.defaults = {
        order : 'unordered',  //是否有序预加载，默认无序
        each : null,    //每张图片加载完成之后执行
        all : null      //所有的图片加载完成之后执行
    };
    UnorderedLoad.prototype.ordered = function(){   //有序加载
        var imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;

        function load(){
            var imgObj = new Image();
            $(imgObj).on('load error',function(){
                opts.each && opts.each(count);        //判断方法是否存在，若存在，则执行
                if(count >= len){
                    //所有图片加载完成
                    opts.all && opts.all();
                }else{
                    load();
                }
                count ;
            });
            imgObj.src = imgs[count];
        };

        load();
    },
    UnorderedLoad.prototype.unordered = function(){    //无序加载
        var imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;

        $.each(imgs , function(i , src){
            if(typeof src != 'string'){
                return;
            }
            var imgObj = new Image();

            $(imgObj).on('load error',function(){
                opts.each && opts.each(count);

                if(count >= len - 1){
                    opts.all && opts.all();
                }

                count ;
            });
            imgObj.src = src;
        });
    };

    $.extend({
        Load : function(imgs,opts){
            new UnorderedLoad(imgs,opts);
        }
    });
})(jQuery);



//使用方式：
//   var imgs = [];     //存放图片地址的数组
//  $.Load(imgs ,{
//      order : 'unordered',         //是否有序预加载，默认无序unordered,有序为ordered
//      each : function(count){
//          每张图片加载完成的操作
//      },
//      all : function(){
//          所有图片加载完成之后的操作
//      }
// })