【jQuery】加载完后显示内容
作者:广树 | 时间:2016-2-12 21:35:13 | 分类 : JavaScript/jQuery/Vue
CSS:
- .newsloader-bg {
- display: none;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0px;
- left: 0px;
- background: #eee;
- z-index: 1;
- }
- .newsloader {
- display: none;
- position: absolute;
- top: 50%;
- left: 50%;
- width: 200px;
- height: 200px;
- margin-top: -100px;
- margin-left: -100px;
- text-align: center;
- color: #999;
- z-index: 2;
- }
- .jpnews-jp, .usanews-en {
- background-color: #FFFFFF;
- border-radius: 10px;
- text-align: center;
- vertical-align: middle;
- -webkit-box-shadow: 0px 0px 6px 0px #333;
- box-shadow: 0px 0px 6px 0px #333;
- width: 780px;
- height: 700px;
- position:relative;
- }
- .jpnews-jp .close-x, .usanews-en .close-x {
- text-align: right;
- height: 35px;
- padding-top: 15px;
- padding-right: 15px;
- z-index: 3;
- position:relative;
- }
HTML:
- <div class="jpnews-jp">
- <div class="newsloader-bg">
- <div class="newsloader">
- <img src="http://imgout.ph.126.net/47161134/loading.jpg" height="40" alt="Now Loading..." />
- <p>努力获取中...</p>
- </div>
- </div>
- <div class="wrap">
- <div style="width:780px;height:630px;">
- 需要显示的正文内容
- </div>
- </div>
- </div>
JS脚本:
- <script>
- $(function() {
- $('.newsloader-bg ,.newsloader').css('display','block');
- });
- $(window).load(function () { //全部加载完后执行
- $('.newsloader-bg').delay(900).fadeOut(800);
- $('.newsloader').delay(600).fadeOut(300);
- $('.wrap').css('display', 'block');
- });
- //经过一定时间后如果还未加载完则强制显示内容
- $(function(){
- setTimeout('stopload()',240000);/*设置时间*/
- });
- function stopload(){
- $('.wrap').css('display','block');
- $('.newsloader-bg').delay(900).fadeOut(800);
- $('.newsloader').delay(600).fadeOut(300);
- }
- </script>
赞一个0
2018-03-21 22:16