插件-监控页面加载之loading
查看效果点https://icedjuice.github.io/plug-in/loading/loading.html
简单易用的loading插件,该插件并不是真正的监控页面的资源加载过程,而是通过模仿监控加载实现效果,简单易用且基本不消耗性能,十分方便。
1. html
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/Loading.jq.js" type="text/javascript" charset="utf-8"></script>
2.css
#loadingPage{ width: 500px; margin: 100px auto; } .loadingWrap{ width: 500px; height: 10px; border: 2px solid #000; border-radius: 10px; position: relative; } .loadingBarbox{ width: 98%; height: 8px; position: absolute; left: 1%;top: 1px; border-radius:8px; overflow: hidden; } #loadingBar{ display: block; height: 100%; position: absolute; left: 0;top:0; background-color: #000; } #loadingNum{ position: absolute; left: 0;top: 120%; display: block; font-size: 20px; color: #000; width: 100%; text-align: center; }
3.js
function Loading (callBack){ var self = this; this.Dom = '<div id="loadingPage"><div class="loadingWrap"><div class="loadingBarbox"><div id="loadingBar"></div></div><span id="loadingNum"></span></div></div>' $('body').append(self.Dom); this.interval = null; this.page = $('#loadingPage'); this.bar = $('#loadingBar'); this.numbox = $('#loadingNum'); this.callBack = callBack || function(){return false;}; this.progress = 0; this.run = function(timing,num,way){ clearInterval(self.interval); self.interval = setInterval(function(){ self.progress += num; if(self.progress>=100) self.progress = 100; self.bar.css('width' , self.progress + "%" ); self.numbox.text( self.progress + '%' ); if(self.progress == 90 && !way){self.run(500,1,false);} if(self.progress == 99 && !way){clearInterval(self.interval);} if(self.progress == 100){ clearInterval(self.interval); if(!!self.callBack){self.callBack();} setTimeout(function (){ self.page.animate({'opacity':'0'},400,function (){$(this).remove();}); },400) } },timing); } this.init = function (timing,num,way){this.run(timing,num,way);}; $(window).on('load',function(){self.run(13,5,true)}); }
4.使用方法
<script type="text/javascript"> $(document).ready(function (){ new Loading(function(){ console.log('loaded') }).init(50,1,false); }) </script>
5.效果
想要什么效果只需要修改相应的css就可以实现不同的加载效果啦!
(完)