图片快速加载优化之预加载插件preload.js

插件：

//图片预加载插件
//使用闭包模拟局部作用域(function)();，保证不会和外面已有的变量冲突
(function ($) {
    function PreLoad(imgs, options) {
        //初始化
        this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;//不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等
        this.opts = $.extend({}, PreLoad.DEFAULTS, options);//数据融合。options的内容覆盖PreLoad.DEFAULTS内容，返回给opts

        /*//无序加载
        this._unoredered();//加下划线表示方法只在内部使用，不提供外部调用*/

        if(this.opts.order === 'ordered'){
            this._ordered();
        }else {
            this._unoredered();
        }
    }

    //当没有传参数时，使用默认参数
    PreLoad.DEFAULTS = {
        order:'unordered',//默认为无序加载
        each: null,//每张图片加载完后执行
        all: null//所有图片加载完后执行
    };

    //方法写在原型上，保障每次实例化的时候，都可以使它保持一份
    PreLoad.prototype._ordered = function () {//有序加载，一张图片加载完成后加载另一张
        var imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;

        load();

        function load() {
            //1.创建图片对象
            var imgObj = new Image();

            //2.绑定事件
            $(imgObj).on('load error',function () {

                opts.each && opts.each(count);

                if(count>= len){
                    //所有图片加载完毕
                    opts.all && opts.all();
                }else{
                    //某张图片加载出错，则调用自身再加载一次
                    load();
                }
                count++;
            });

            //3.图片路径赋值给图片对象的src,来开始预加载
            imgObj.src = imgs[count];

        }
    };

    PreLoad.prototype._unoredered = 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 () {//执行error方法是因为保证当某张图片加载失败后，保证程序继续执行

                opts.each && opts.each(count);//判断opts的 参数each是否存在，如果存在就执行each().巧妙运用了&&运算符的特点，首项为false则后面的不会执行

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

                count++;
            });

            imgObj.src = src;
        });
    };

    //制作插件。两种方法。我们选择2
    //1、$.fn.extend -> $(#img).preload()元素方法
    //2、$.extend -> $.preload();工具方法
    $.extend({
        preload: function (imgs, opts) {
            new PreLoad(imgs, opts);//实例化
        }
    });

})(jQuery);

无序加载使用：each为每张图片加载完成后执行的代码。all为所有图片加载完成后执行的代码

//使用插件
    $.preload(imgs, {
        each: function (count) {
            $('.progress').html(Math.round((count + 1) / len * 100) + '%')
        },
        all: function () {
            $('.loading').hide();
            document.title = '1/' + len;
        }
    });

有序加载使用方法：

$.preload(imgs,{
        order:'ordered'
    });