图片预加载

2018-06-24 00:56:09来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 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)

当已知要加载图片时方能使用,提升网页的流畅性。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:微信开发本地服务器映射外网服务器步骤顺序

下一篇:fetch知识点汇总