最近做的一些網頁，單個網頁圖片量都比較大，網絡不好的情況下，特別卡，這個圖片預加載的方法可以犧牲一些時間換來網頁的瀏覽順暢，還是值得的。

//可以使用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>

可以直接拿來用！

閉包，jQuery插件的寫法：圖片預加載