导航

萌即是正义!时不时分享一些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-08
@Asuna:谢谢!谢谢!
Asuna
2024-05-08
恭喜获得高质量博客认证~
广树
2024-05-08
@老张博客:是的,不仅仅是大城市,很多小乡村也是依靠动漫发展起来的旅游产业,所以不要小看文化产业带来的经济价值啊!
老张博客
2024-05-08
到日本 是不是大街小巷都是这些动漫呀!
广树
2024-05-08
@Chise Hachiroku:不是还有,而是最近出来的新服务🤭。送货时间太迟了,不是急需的话还是一般配送比较好。
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告