外贸建站之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