圖片預載入

 1 (function ($) {
 2     function PreLoad(imgs, options) {
 3         this.imgs = (typeof imgs == "string") ? [imgs] : imgs;
 4         this.opts = $.extend({}, PreLoad.DEFAULTS, options);
 5 
 6         this._unoredered();
 7     }
 8     PreLoad.DEFAULTS = {
 9         each: null,//每一張圖片載入完成後執行
10         all: null//所有圖片載入完成後執行
11     }
12     PreLoad.prototype._unoredered = function () {
13         var imgs = this.imgs,
14             opts = this.opts,
15             count = 0,
16             len = imgs.length;
17 
18         $.each(imgs, function (i, src) {
19             if (typeof src != 'string') return;
20             var imgObj = new Image();
21             $(imgObj).on("load error", function () {
22                 opts.each && opts.each();
23 
24                 if (count >= len - 1) {
25                     $('.loading').hide();//頁面上添加的loading動畫隱藏
26                 }
27                 count++;
28             })
29             imgObj.src = src;
30         })
31     }
32 
33     $.extend({
34         preload: function (imgs, opts) {
35             new PreLoad(imgs, opts);
36         }
37     })
38 })(jQuery)

當已知要載入圖片時方能使用，提升網頁的流暢性。