`

Jquery版页面载入loading提示效果

 
阅读更多

这个loading提示效果是从LaoZhuHome上拿来的。修改之后应用到了pjblog上，相对于之前的load载入效果更佳，故放弃了之前的“页面载入中……”提示 ，而采用了您现在所看到的效果。
实现原理就是先让loading图片最先显示，当页面加载完毕的时候用JS控制loading图片消失，基于jquery实现。具体修改方法如下：

1、Html代码

打开header.asp，在<body>下插入

 
<div id="loading"></div>  
<div id="big_body" style="display:none">

 

2、Css代码

在layout.css中插入

 
#loading{position:fixed;_position:absolute;top:50%;left:50%;width:124px;height:124px;overflow:hidden;background:url(loaderc.gif) no-repeat;z-index:7; margin:-62px 0 0 -62px;}  


这里要用到一张124*124的gif动态图片

3、Js代码

在footer.asp中</body>之前插入

</div>
<script type="text/javascript"> 
jQuery.noConflict(); 
jQuery("#loading").fadeOut() ;
jQuery("#big_body").css("display","block");
</script> 
分享到：
| other -> SVN 使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics