外贸建站之jQuery页面区块局部加载代码分享

外贸建站之jQuery页面区块局部加载代码分享,jQuery页面区块局部加载代码,通过设置每个区块加载时间速度,实现多个区块先后预加载布局效果。

 1 <script>
 2 var loading1 = $('.loading-1').myloading('show');
 3 var loading2 = $('.loading-2').myloading('show');
 4 var loading3 = $('.loading-3').myloading('show');
 5 var loading4 = $('.loading-4').myloading('show');
 6 var loading5 = $('.loading-5').myloading('show');
 7 
 8 setTimeout(function () {
 9     loading1.myloading('hide');
10 }, 3000);
11 setTimeout(function () {
12     loading2.myloading('hide');
13 }, 2000);
14 setTimeout(function () {
15     loading3.myloading('hide');
16 }, 5000);
17 setTimeout(function () {
18     loading4.myloading('hide');
19 }, 6000);
20 setTimeout(function () {
21     loading5.myloading('hide');
22 }, 5000);
23 </script>

下面我们再贴出核心函数myloading的代码:

 1 (function ($) {
 2     var methods = {
 3         show: function () {
 4             return this.each(function (i) {
 5                 var _this = $(this);
 6                 if (_this.css('position') != 'absolute' && _this.css('position') != 'relative') {
 7                     _this.css('position', 'relative');
 8                 }
 9                 _this.prepend('<div class="myloading"><span class="glyphicon glyphicon-refresh"></span></div>');
10             });
11         },
12         hide: function () {
13             return this.each(function (i) {
14                 var _this = $(this);
15                 _this.find('.myloading').remove();
16             });
17         }
18     }
19     $.fn.myloading = function (options) {
20         var method = arguments[0];
21         if (methods[method]) {
22             method = methods[method];
23         } else if (!method) {
24             method = methods.show;
25         } else {
26             $.error('error');
27             return this;
28         }
29         return method.apply(this, arguments);
30     }
31 })(jQuery)

本文参考:https://www.chinaobd2.com/wholesale/cgdi-at-200-ecu-programmer-for-bmw.html
            https://www.chinaobd2.com/wholesale/autel-maxiim-im508-immo-key-programmer.html

猜你喜欢

转载自www.cnblogs.com/aid12580/p/10680666.html
今日推荐