Jquery版页面载入loading提示效果

杉林的HelloWord 2013-09-13

这个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动态图片
Jquery版页面载入loading提示效果

3、Js代码

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

</div>
<script type="text/javascript"> 
jQuery.noConflict(); 
jQuery("#loading").fadeOut() ;
jQuery("#big_body").css("display","block");
</script> 

相关推荐

Web全栈笔记 / 0评论 2020-06-15