`

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:7margin:-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> 
分享到:
评论

相关推荐

    JS 页面载入等待特效 javascript

    页面载入等待特效(Loading Effects),是指当页面数据加载或请求处理时,在前端显示的一种动态效果或提示信息,目的是告知用户当前页面正在进行加载操作,通常会展示一个动态的动画或者文字提示。 #### 二、技术...

    js等待提示,页面提交等待载入效果

    在网页开发中,"js等待提示"是一种用户体验优化技术,主要目的是在页面处理大量数据或者进行异步操作时,向用户展示一个加载或等待的提示,以告知用户系统正在运行中,避免用户误认为页面卡死。这个过程通常涉及到...

    bootstrap页面载入按钮插件

    "bootstrap页面载入按钮插件"是Bootstrap框架的一个扩展,专门用于处理页面加载时的用户体验。这个插件允许在页面数据正在获取或处理时显示一个具有反馈功能的加载按钮,提升用户对加载过程的认知,同时保持页面界面...

    jquery遮罩层插件mloading

    2. **全屏遮罩**:该插件的亮点之一是它可以实现全屏遮罩效果,无论页面内容如何滚动,遮罩层始终保持覆盖整个屏幕。这有助于确保用户的注意力集中在当前的操作上。 3. **简单易用**:`mloading` 插件的使用非常...

    jQuery日常使用总结

    这些只是jQuery日常使用的一部分,jQuery还提供了丰富的API和插件,如选择器、动画效果、AJAX请求等,能够极大地提高开发效率。学习并熟练掌握jQuery,将有助于你更好地构建交互性强、用户体验良好的Web应用。

    Jquery easy ui 中文帮助手册

    1.2 **简单载入器**:在页面加载时,Easy UI 提供了载入提示组件,可以显示正在处理的信息,提高用户体验。使用`&lt;div class="easyui-loading"&gt;&lt;/div&gt;`即可创建一个简单的载入指示器。 1.3 **一般拖动**:许多Easy ...

    移动Web应用程序下载页面html前端模板.zip

    6. 载入优化:考虑到移动网络环境可能不稳定,下载页面可能会包含优化策略,如延迟加载(lazy loading)非首屏内容,压缩图片和CSS/JS文件以减少加载时间,或者使用预加载技术来提高页面性能。 7. SEO优化:对于...

    纯javascript仿做土豆网豆单列表载入图片特效.zip

    【描述】提到的“纯javascript仿做土豆网豆单列表载入图片特效”指的是,不依赖任何外部库(如jQuery),完全用原生JavaScript编写的一种技术实现。这种特效通常包括懒加载(lazy loading)功能,即当用户滚动页面时...

    几个比较经典常用的jQuery小技巧

    6. Load()函数的运用(页面载入提示) 文章最后提到了在页面加载时,通过Load()函数和CSS来实现一个页面加载提示的效果。首先通过CSS样式将一个加载提示框定位到页面的右上角。然后使用jQuery的load()函数,在页面的...

    Asp.net自定义控件之加载层

    Page.ClientScript.RegisterClientScriptResource(typeof(Loading), "BoControl.Scripts.Jquery.js"); this.Page.ClientScript.RegisterStartupScript(typeof(string), "BoControl_" + this.ClientID, $"$(\"#{...

    基于ajax实现点击加载更多无刷新载入到本页

    "&gt;&lt;img src="ajax-loader.gif"&gt; Loading...&lt;/div&gt;`,用于在数据加载时给用户反馈。 2. **JavaScript代码**: 使用jQuery库来简化Ajax操作。在`$(document).ready()`函数中初始化变量`track_click`,用来追踪用户...

Global site tag (gtag.js) - Google Analytics