导航

萌即是正义!时不时分享一些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-05-18
@HelloGakki:《未闻花名》的歌确实令人印象深刻,以至于时不时还会去KTV唱上一首!如果有机会的话,也来日本进行一次圣地巡礼吧!
HelloGakki
2024-05-18
写的真好,当初看未闻花名的时候哭的稀里哗啦,以至于听到歌都鼻头一酸
广树
2024-05-17
@老张博客:一千多人民币的水平吧
广树
2024-05-17
@MqyGalaxy:以前空中网的时代好像没有同步吧,现在同步了呀。
广树
2024-05-17
@DavidYR:不愧是大佬!行动力好强!我已经好几年没碰坦克世界了🤭
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告