等待加载资源的时候显示转菊花

最新推荐文章于 2022-06-14 12:12:23 发布

yueyang3

最新推荐文章于 2022-06-14 12:12:23 发布

阅读量678

点赞数

分类专栏： web前端 javascript jquery 文章标签： html 转菊花 JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/yueyang3/article/details/84613374

版权

jquery 同时被 3 个专栏收录

5 篇文章

订阅专栏

web前端

4 篇文章

订阅专栏

javascript

4 篇文章

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="<%=basePath%>404page/css/main.css" type="text/css" media="screen, projection" /> <!-- main stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="../css/tipsy.css" /> 

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

<script type="text/javascript" src="../js/jquery.js"></script> 

<script type="text/javascript">
function universalPreloader(){

	var pre = $("#universal-preloader>div");

	//centering function
	jQuery.fn.center = function () {
		this.css("position","absolute");
		this.css("top", (($(window).height() - this.outerHeight()) / 2) + "px");
		this.css("left", (($(window).width() - this.outerWidth()) / 2) + "px");
		return this;
	}

	//center to the screen
	pre.center();

	//run each time user resizes window
	$(window).resize(function() {

		pre.center();

	});

}

function universalPreloaderRemove(){

	var parentD = $("#universal-preloader");
	var pre = $("#universal-preloader>div");

	pre.delay(1000).animate({opacity:'0'},{duration:400, complete:function(){

		parentD.animate({opacity:'0'},{duration:400, complete:function(){
		parentD.remove();

		}});

	}});


}

//DOM加载完毕,图片,js等未加载完成
$(document).ready(function(){
	//转菊花,等待...		
	universalPreloader();

});

//所有资源都加载完毕,移除转菊花...
$(window).load(function(){
	//移除转菊花...
	universalPreloaderRemove();

	...


});

</script>


<title>404 - Not found</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>

<!-- Universal preloader -->
<div id="universal-preloader">
    <div class="preloader">
        <img src="../images/universal-preloader.gif" alt="universal-preloader" class="universal-preloader-preloader" />
    </div>
</div>
</body>