闭包，jQuery插件的写法：图片预加载

Posted 2020-10-04 礼拜16

最近做的一些网页，单个网页图片量都比较大，网络不好的情况下，特别卡，这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅，还是值得的。

//闭包的写法，它内部的变量都是局部的，不会和外部巳有的变量进行冲突

( function (通过它来接收对象) {

 

} )( 通过它来传递对象 );

 

//可以使用jQuery的$符号的闭包插件的写法：
//写插件的常用方法  $.extentd()

(function ($){
       //构造函数
        function PreLoad(imgs,options){
            this.imgs = (typeOf === ‘string‘) ? [imgs] : imgs;
            //生成一个新的对象，将后一个覆盖前一个返回一个新对象
            this.opts = $.extend({},PreLoad.DEFAULTS, options);

            //无序加载方法，方法加下划线表明这个方法只在内部使用
            this._unoredered();
            
        }
        //定义默认参数，如果没有传过来参数，可以使用
        PreLoad.DEFAULTS = {
            each: null, //方法，每一张加载完毕后执行
            all: null //所有图片加载完毕后执行
        }

        //面向对象的方法都写在原型上，可以比较方法的实例化
        PreLoad.prototype._unoredered = function(){
            //无序加载

            var imgs = this.imgs，
                opts = this.opts,        
                count = 0,
                len = imgs.lenght;

            $.each(imgs, function(i,src){
                //判断src是否为字符串,如果不是，就直接返回
                if(typeof src != ‘string‘) return;
                var imgObj = new Images();
                
                //load  全部加载完  error 有发生错误时
                $(imgObj).on(‘load error‘,function(){
                    //判断 opts是否存在,每一次加载的图片数量 count
                    opts.each && opts.each(count);
                    
                    if(count >= len - 1){
                        //如果 opts.all存在就去执行它
                        opts.all && opts.all();
                    }
                    count ++;
                });
                //把src给img对象中的src赋值
                imgObj.src = src;
            });
        };

        //上面是插件中的方法已经写完了，下面是怎么把上面的方法变为一个可用的插件
        //调用方法一般有两种
        //附在$.fn后面
        //$.fn.extend -> $(‘#id‘).preload();
        //另一种是跟在jQuery对象上的，它的形式就是个工具函数,常用的也是这种工具函数
        //$.extend -> $.preload();
        //这个插件按标准来应该这样写

        $.extend({
            //插件名称及传递的参数，这样这个插件就完写了
            preload: function(imgs, opts){
                //实例化构造函数,并将参数传递进来
                new PreLoad(imgs, opts);
            }
        });
})(jQuery);</script>

如何使用它呢？

//调用这个插件
<script>
    var = imgs = [
        ‘1.jpg‘,
        ‘2.png‘,
        ‘3.jpg‘
     ];

     //给插件传递参数，一个为数组，另一个为一个参数列表
     $.preload(imgs, {
        //每加载完一张图片之后执行的方法
        each: function(count){
            //每一次都需要更新一次加载进度
            $progress.html(Math.round((count + 1) / len * 100 + ‘%‘);
        },
        //所有图片加载完毕后执行的方法
        all: function(){
            //loading 隐藏，另，加载的图片数量显示
            $(‘.loading‘).hide();
            document.title = ‘1/‘ + len;
        }
     })
</script>

可以直接拿来用！