閉包，jQuery外掛程式的寫法：圖片預先載入

標籤：應該   預先載入   count   參數傳遞   tle   html   閉包   eof   extent   

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

//閉包的寫法，它內部的變數都是局部的，不會和外部巳有的變數進行衝突( 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>

可以直接拿來用！

閉包，jQuery外掛程式的寫法：圖片預先載入