Jquery版页面载入loading提示效果

卧斋

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>

卧斋

0 关注 0 粉丝 0 动态

相关推荐

Jquery版页面载入loading提示效果

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

杉林的HelloWord 2013-09-13

jquery css3页面弹出loading加载

在前段页面制作中，一个选项卡往往需要加载的内容会很多，例如一些图片站和特效站点，过长的加载和不完整的加载会给读者很不好的体验，这时候，如果我们在加载的过程中加入一个小小的设定，就是接下来要给大家展现的，loading等待加载提示，大家可以自由发挥把加载美化

mjx00 2017-08-09

纯CSS仿windows系统loading效果

今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线的过渡效果，如下所示

icewizardry 2016-12-20

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验，现在大多数网页都会在页面中加一个加载中效果，这里实现一个加载中逐渐消失的效果，以至于看上去不那么生硬。给加载中效果默认opacity设为1，逐渐消失的效果则把opacity变为0，但是元素在页面中不消失，这样会影响页面其他元素的点击

87433764 2017-09-28

phpstorm 基于lumen安装ide-helper

Package operations: 11 installs, 0 updates, 0 removals. Generating optimized autoload files配置中加载。A new helper file was written t

dykun 2019-07-01

vue-router懒加载时添加loading效果

近期在做一个微信公众号的项目，在页面跳转时发现页面会闪一下，用户体验很不好，而且如果网慢时页面是没有数据的样式会乱很丑。于是乎，就百度看了前人的各种解决方案，个人觉得以下链接中的方案还是很好的，代码简洁，效果也很满意，不需要每个页面做相对应的操作只需要在r

81427605 2019-06-28

css loading

https://github.com/webkul/csspin

nicepainkiller 2018-04-28

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验，现在大多数网页都会在页面中加一个加载中效果，这里实现一个加载中逐渐消失的效果，以至于看上去不那么生硬。</script>给加载中效果默认opacity设为1，逐渐消失的效果则把opacity变为0，但是元素在页面中不消失

87443561 2017-09-28

jQuery性能优化建议

对于jQuery这个最流行的javascript类库都不陌生，而且只要是前端开发人员肯定或多或少的使用或者接触过，在这篇文章中，参考了一些资料及实际使用效率，将介绍一些书写高质量jQuery代码的原则，不单单会告诉你如何去书写，也会告诉你为什么这样书写，希

87453169 2017-04-18

纯CSS仿windows系统loading效果

今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线的过渡效果，如下所示

icewizardry 2016-12-20

【Jquery】添加loading过渡遮罩

用webpack打包一个h5项目，css也打包在bundle.js里，加载稍慢就会有有几秒钟页面呈现出一个没有样式的丑态，所以想设置一个白色遮罩，等js加载完毕消失。在body中放一个自带行内样式的loading块。<div id="loa

momode 2019-06-27

Jquery性能优化

$loading=$;//这个是全局定义，不知道哪里位置倒霉引用了相同的变量名，就会郁闷至死的。var $loading = $;这里定义成这样的好处在于，你可以有效的提示自己或者其它阅读你代码的用户，这是一个jQuery的变量。在jQuery代码开发中，

88261841 2015-06-20

Understanding RequireJS for Effective JavaScript Module Loading

define(["moduleA","moduleB","moduleC"],function(A,B,C){

aganliang 2014-05-15

svg实现的六个loading加载动画

在svg出现之前我们选择加载动画一般都是通过gif格式的图片实现的，但也有一个弱点就是gif图片一旦做出来就无法改动了，但svg实现不同，它可以通过代码随时修改加载的动画效果,可实现的种类非常丰富。喜欢哪种大家可以自己去衡量，今天继续向大家分享一款通过sv

MegatronKings 2014-03-19

支持Lazy loading的图片画廊jQuery插件 - Least.js

Least.js是一个jQuery开发的图片画廊，可以用来展示Pininterest风格的图片布局，它将无需的列表项目通过随机方式来加载。如果你点击任何图片的话，并不显示一个更大版本的图片，而是滑动其它的图片，在顶端生成更大的图片，类似Google图片搜索

publicTIM 2013-06-18

jquery的ajax提交时“加载中”提示的处理方法

方法1：使用ajaxStart方法定义一个全局的“加载中。。。”位置上显示“加载中。。。”-------但是一定要注意，同时要定义好ajaxSuccess事件，ajax提交成功后把这个图标隐藏起来！！！url----url路径，根据你需要些啦,图标，在er

Haoroid 2013-01-23

ajaxStart()和ajaxStop()使用

同样，ajaxStop()方法则是在所有Ajax请求都完成时调用。只要在 ".js"文件中加入以下的代码就可以显示id为loading的标签中的内容。

Chydar 2013-01-17

SVG + CSS 实现 Material Design Loading

相信这个 loading 的标志大家都很熟悉，是不是很和谐？额...有毒，看得停不下来。既然，那么神奇，我就好奇地研究了一下。原来它是 Material Design Progress的一种 —— Circular。在研究的过程中，发现有大神用 CSS +

nicepainkiller 2019-06-20

jquery blockUI 居中显示

var__widowWidth=$(window).width();var__popWidth=$("#Loading").width();//Loading为要显示的div. var__left=(__widowWidth-__pop

83453065 2012-05-17

html5 loading 效果来了

Html5在移动设备上表现抢眼，几乎所有稍微高端一点的设备的浏览器都支持Html5。而且据我个人的测试这些支持html5的设备对canvas标签的支持是相当的好。大家都知道web2.0以来大量的使用ajax，loading的小图标也有很多很多种，甚至还有专

努力的zhiyi 2011-12-20

卧斋

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号