JQuery 实现页面 loading 效果

来源：互联网发布：h3c vlan加端口编辑：程序博客网时间：2024/06/05 10:14

当页面正在加载时页面效果如下图：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>loading</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $(window).load(function(){
       $("img").hide("");
       $("p").hide("");
      });
   });

</script>
<style>
*{
   margin:0px;
   padding:0px;
}
body{
   min-height:500px;
}
.loading{
   width:600px;
   height:600px;
   padding:200px 550px;
}
.loading img{
   width:200px;
   height:100px;

}
.loading p{
   color:#39F;
}
</style>
</head>

<body>
<h1 align="center">JQuery 实现页面 Loading 效果</h1>
<div class="loading">
   <img src="loading.gif"/>
   <p>页面正在加载中，请稍后......</p>
</div>

</body>
</html>

主要是运用 load 方法，即当指定的元素（及子元素）已加载时，会发生load( )事件

0 0