正在召唤神秘力量
导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

【jQuery】加载完后显示内容

作者:广树·时间:2016-02-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>


侧边栏
最新评论
广树
2024-03-29
@电脑星人:如果只是比对的话,是一个不错的方法。举这个例子只是想表达假名有很多看起来一样,但不是一样的字符,开发的时候如果没把这个挂心上的话可能会造成很多问题😅
电脑星人
2024-03-29
```javascript const c2 = 'ド'; console.log(c2.length); // 2 const c1 = 'ド'; console.log(c1.length); // 1 console.log(c2 === c1); // false console.log(c2.normalize() === c1); // true console.log(c2.normalize().length); // 1 ```
广树
2024-03-27
@关关:这里只是统计用的,不是都参加😅
广树
2024-03-27
@Chise Hachiroku:那不就是倒爷吗,确实要和倒爷比的话
关关
2024-03-27
你的生活我的梦……
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告