基于jquery的loading效果实现代码

yaasshole 2010-11-05

在代码<head></head>里加入以下代码：

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(window).load(function(){$("#loading").hide();})</script>
在里<body></body>加入以下代码：

<div id="loading">Loading content, please wait..<img src="loading.gif" alt="loading.." /></div>
在里的这代码必须保证在网页载入的最前面。

接着是css代码：

#loading{position:absolute;width:300px;top:0px;left:50%;margin-left:-150px;text-align:center;padding:7px 0 0 0;font:bold 11px Arial, Helvetica, sans-serif;}
一个基于jquery的loading效果就完成咯。

: yaasshole

相关推荐

Jquery版页面载入loading提示效果

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

杉林的HelloWord 0喜欢 / 0评论 2013-09-13

jquery css3页面弹出loading加载

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

mjx00 0喜欢 / 0评论 2017-08-09

纯CSS仿windows系统loading效果

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

icewizardry 0喜欢 / 0评论 2016-12-20

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

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

87433764 0喜欢 / 0评论 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 0喜欢 / 0评论 2019-07-01

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

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

81427605 0喜欢 / 0评论 2019-06-28

css loading

https://github.com/webkul/csspin

nicepainkiller 0喜欢 / 0评论 2018-04-28

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

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

87443561 0喜欢 / 0评论 2017-09-28

jQuery性能优化建议

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

87453169 0喜欢 / 0评论 2017-04-18

纯CSS仿windows系统loading效果

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

icewizardry 0喜欢 / 0评论 2016-12-20

【Jquery】添加loading过渡遮罩

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

momode 0喜欢 / 0评论 2019-06-27

Jquery性能优化

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

88261841 0喜欢 / 0评论 2015-06-20

Understanding RequireJS for Effective JavaScript Module Loading

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

aganliang 0喜欢 / 0评论 2014-05-15

svg实现的六个loading加载动画

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

MegatronKings 0喜欢 / 0评论 2014-03-19

Jquery版页面载入loading提示效果

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

卧斋 0喜欢 / 0评论 2013-09-13

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

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

publicTIM 0喜欢 / 0评论 2013-06-18

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

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

Haoroid 0喜欢 / 0评论 2013-01-23

ajaxStart()和ajaxStop()使用

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

Chydar 0喜欢 / 0评论 2013-01-17

SVG + CSS 实现 Material Design Loading

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

nicepainkiller 0喜欢 / 0评论 2019-06-20

jquery blockUI 居中显示

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

83453065 0喜欢 / 0评论 2012-05-17

html5 loading 效果来了

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

努力的zhiyi 0喜欢 / 0评论 2011-12-20

GWT Loading....

import java.util.List;private static Loading me;private List workingObjects = new ArrayList();private boolean shown;// super(

JimmyblyLee 0喜欢 / 0评论 2011-09-06

用纯CSS实现饼状Loading等待图

之前碰到一个小练习，就是用纯CSS3来写饼状的loading效果，之前着实没有写过这玩意儿，小花完全没头绪，然后参考了张鑫旭老师的CSS3实现鸡蛋饼饼状图loading等待转转转，还有些别的东西，用一种看起来有一点类似但是好像又不一样的方式完成了同样的效果

qiupu 0喜欢 / 0评论 2017-05-19

Vue+Vux项目实践完整代码

-- built files will be auto injected -->. import {WechatPlugin, AjaxPlugin, LoadingPlugin, ToastPlugin, AlertPlugin} from 'vu

phillip 0喜欢 / 0评论 2017-11-30

Android动效篇：一个绚丽的Loading动效分析与实现

前两天我们这边的头儿给我说，有个 gif 动效很不错，可以考虑用来做项目里的Loading，问我能不能实现，看了下效果确实不错，也还比较有新意，复杂度也不是非常高，所以就花时间给做了，我们先一起看下原gif图效果：

89751532 0喜欢 / 0评论 2015-08-20

javascript实现点击提交按钮后显示loading的方法

本文实例讲述了javascript实现点击提交按钮后显示loading的方法。分享给大家供大家参考。

月光如水照缁衣 0喜欢 / 0评论 2015-07-03

jQuery实现图片预加载效果

本文实例讲述了jQuery实现图片预加载效果代码。分享给大家供大家参考。});本文已被整理到了《jquery图片加载方法汇总》，欢迎大家学习阅读。大家在加载图片时就会看到这种效果，现在知道是实现的过程了吧，希望大家喜欢小编分享的jQuery实现图片预加载效

YUYISHARE 0喜欢 / 0评论 2015-11-27

jQuery实现彩带延伸效果的网页加载条loading动画

本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画。分享给大家供大家参考，具体如下：。这里介绍的jQuery彩带效果网页加载条动画，我觉得挺有创意的，虽然难度不算大，但能想到用这样一个背景来做Loading加载条，也实属不易，不服气的

mengyun00 0喜欢 / 0评论 2015-10-29

jQuery实现页面滚动时动态加载内容的方法

本文实例讲述了jQuery实现页面滚动时动态加载内容的方法。分享给大家供大家参考。很多网站，比如twitter，京东商城首页，会在页面滚动到一定的位置时才动态加载页面内容，这样可以加快页面打开的速度，也可以节约带宽，下面的JS代码就可以帮你做到。});希望

keyijing 0喜欢 / 0评论 2015-03-20

7 款华丽的 HTML5 Loading 动画特效

我们在进行大数据的传输或者复杂操作的等待时，最好能有一个Loading等待的小动画提示用户。本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效，希望你会喜欢。这次我们来看一款非常酷的Loading动画加载效果，和纯CSS3实现齿轮Loa

人生旅途中 0喜欢 / 0评论 2015-12-07

jQuery性能优化的38个建议

十三、尽量使用原生的Javascript如果使用原生的Javascript也可以实现jQuery提供的功能的话，推荐使用原生的javascript来实现。

xiongfeng 0喜欢 / 0评论 2014-03-04

jQuery Ajax请求状态管理器打包

); 再添加一个模块到userinfo的加载器中： var id2 = $.loader.

ZhangYD 0喜欢 / 0评论 2012-05-03

基于jquery的loading 加载提示效果实现代码

<div id="progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>

CeiWCJ 0喜欢 / 0评论 2011-09-01

巧用ajax请求服务器加载数据列表时提示loading的方法

我们利用weui.js中的weui.loading为效果，ajax的beforeSend与complete方法，做一个加载数据时会有几秒的 loading...

xiaoxiaod 0喜欢 / 0评论 2019-04-06

Ajax风格的一款网页Loading效果

现在比较流行的一款Ajax风格的网页Loading，多见于一些大量使用Ajax技术的网站中，页面加载时会自动显示提示信息，带载入动画效果，网页加载完自动消失，是一款正在具有Loading功能的网页进度条。

Vertoria 0喜欢 / 0评论 2014-02-19

WCF初试,用JQuery实现loading的功能

1.建立WCF project. 默认的方法改为。{. }

89437807 0喜欢 / 0评论 2009-06-16

【代码笔记】iOS-自定义loading(IanAlert)

// Do any additional setup after loading the view, typically from a nib.// Dispose of any resources that can be recreated.

MAGI的专栏 0喜欢 / 0评论 2017-11-29

解决多个ajax页面请求，页面loading阻塞问题

在项目中碰到多个ajax加载，loading加载出现问题，没有能第一时间加载出来。主要原因是因为：浏览器的渲染线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作都会停止下

稀土 0喜欢 / 0评论 2017-10-15

图片载入状态判断及实现百分比效果loading

前言一些大的外部资源会导致页面加载速度慢，这时候一般会加上loading效果；这里实现的是根据图片加载进度的百分比loading效果。推荐使用这种方法，在图片加载成功后，会触发onload事件，就算有缓存只要重新请求了图片地址，都会触发onload事件；图

ScalersTalk成长会 0喜欢 / 0评论 2017-10-14

adnroid 自定义ProgressDialog加载中

前两天在做项目的时候发现有时候在访问网络数据的时候由于后台要做的工作较多,给我们返回数据的时间较长,所以老大叫我加了一个加载中的logo图用来提高用户体验.

软件设计 0喜欢 / 0评论 2017-06-22

Track Image Loading效果代码分析

在图片的加载过程中，提供定义图片加载成功或加载失败/超时时的回调函数，并确保执行。原生JavaScript已经对Image对象提供了onload和onerror注册事件。但在浏览器缓存及其他因素的影响下，用户在使用回退按钮或者刷新页面时onload事件常常

BAT 批处理程序 0喜欢 / 0评论 2017-05-15

《动手实现一个网页加载进度loading》

loading随处可见，比如一个app经常会有下拉刷新，上拉加载的功能，在刷新和加载的过程中为了让用户感知到load的过程，我们会使用一些过渡动画来表达。最常见的比如“转圈圈”，“省略号”等等。所以页面的加载进度都是“假”的，它存在的目的是为了提高用户体验

编程爱好者联盟 0喜欢 / 0评论 2017-01-04