Jquery版页面载入loading提示效果

最新推荐文章于 2022-04-02 12:35:34 发布
最新推荐文章于 2022-04-02 12:35:34 发布
阅读量310 收藏
点赞数
分类专栏： jquery mobiles js + jquery 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mft8899/article/details/84479372
版权

这个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> 
mft8899
关注
专栏目录
JQuery 实现页面 loading 效果
group401的博客
04-17 1682
当页面正在加载时页面效果如下图： 当加载完成时，loading 图片和文字“页面正在加载中，请稍后......“将会消失。代码如下： loading     $(document).ready(function(){       $(window).load(function(){         $("img").hide("");         $("p"
jQuery加载全部页面完成前的loading效果
JENIFURS的博客
07-26 7232
此效果的原理：在页面加载完成前在整个页面上边覆盖一层，即loading层，等到页面加载完成后，将loading层隐藏。 此效果的HTML代码部分：在整个代码前，添加div，即loading层（可以添加load的图片，也可以当做背景图写在css里） CSS部分： #loading { position: fixed; z-index: 4
Jquery的一个loading图片效果，加载图片
weixin_30617561的博客
06-07 178
可以加载多个图片 <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="MinmyLazyload.js" type="text/javascript"></script> <body> <img original="htt...
jquery ajax loading效果
热门推荐
闷骚的男
03-02 2万+
<br /><script type="text/javascript" src="jquery-1.3.2.js"></script> <br /><script type="text/javascript"> <br />$(function() { <br />$("#loading_img").click( <br />function() <br />{ <br />$.ajax({ <br />type:"GET", <br />url:"demo.php", <br />data:"name=
Jquery loading 效果
weixin_34110749的博客
11-07 102
  function showLoad(tipInfo) { var eTip = document.createElement('div'); eTip.setAttribute('id', 'tipDiv'); eTip.style.position = 'absolute'; eTip.style.displ...
jquery 实现简单loading 效果
weixin_30898109的博客
07-10 1110
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <hea...
html 载入效果,HTML5 Loading动画特效集锦
weixin_32871457的博客
05-31 1426
本文作者html5tricks，转载请注明出处以前我们大部分的Loading动画都是利用gif图片实现的，这种图片实现Loading动画的方法虽然也很不错，但是作为1、HTML5 Canvas发光Loading动画之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5Canvas的发光Loading加载动画特效。Loading旋转图标是在ca...
记页面加载之前的loading效果
znbb_的博客
07-02 1367
最近做H5页面，内嵌到安卓端的APP内，需求是要在页面所有数据请求完毕之前显示loading图标提示用户等待，因为在手机端的网速很大程度上是不确定的，loading等待在用户体验度上确实比较友好。 话不多说，结合代码直接看效果 1.HTML结构部分 <div class="mask" id="mask_id"> <div class="mask_loading"&g...
js等待提示，页面提交等待载入效果
03-29
在网页开发中，"js等待提示"是一种用户体验优化技术，主要目的是在页面处理大量数据或者进行异步操作时，向用户展示一个加载或等待的提示，以告知用户系统正在运行中，避免用户误认为页面卡死。这个过程通常涉及到...
bootstrap页面载入按钮插件
03-19
"bootstrap页面载入按钮插件"是Bootstrap框架的一个扩展，专门用于处理页面加载时的用户体验。这个插件允许在页面数据正在获取或处理时显示一个具有反馈功能的加载按钮，提升用户对加载过程的认知，同时保持页面界面...
CSS3 引入jquery实现页面加载的LOADING效果
06-02
CSS3 引入jquery实现页面加载的LOADING效果，就是一个载入动画，一个加载的进度条效果，圆形小圆点在不断的旋转，当加载完毕后，自动消失，本页面由HTML5技术和jquery共同实现，LOADING和页面显示两者之间同样也加入了渐变动画效果，可作为一个HTML5 Loading应用的例子。
一个适合做页面 “加载中” 效果的插件 jquery-loading
10-26
一个适合做页面 “加载中” 效果的插件 jquery-loading 非常简单实用！！
jquery弹出Loading层
04-14
NULL 博文链接：https://ollevere.iteye.com/blog/1748190
JS 页面载入等待特效 javascript
03-09
页面载入等待特效（Loading Effects），是指当页面数据加载或请求处理时，在前端显示的一种动态效果或提示信息，目的是告知用户当前页面正在进行加载操作，通常会展示一个动态的动画或者文字提示。 #### 二、技术...
基于jquery实现页面loading加载效果
m0_57217156的博客
04-02 4122
1.css样式 代码如下（示例）： <style type="text/css"> .background { display: block; width: 100%; height: 100%; opacity: 0.4; filter: alpha(opacity=40); background:while; position: absolute; top: 0; left: 0; z-
jquery loading效果
02-24 143
   说明：用户登录系统后,系统一些资源还在加载 （即，没有加载完，无法正常相应用户的操作） 这时我想弄个遮罩效果，当加载完后遮罩消失。    效果图见附件 &lt;script type='text/javascript' src='&lt;%=basePath %&gt;js/jquery-1.2.6.min.js'&gt;&lt;/script&gt; &lt;script typ...
css3+jQuery实现 好看的 loading 效果
summer爱前端
01-17 339
css3+jQuery实现的好看简单的loading效果 个人感觉还是蛮好看的（渡一公开课上学到的） 效果图 上代码，比较简单，就不解析了，有问题私信哦 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
jquery实现loading...提示
文少-笨小孩
02-10 731
代码实现过程 html: 数据加载中，请稍等... css: #progressBar { margin: 0; font-size: 12px; line-height: 100%; font-family: Arial, sans-serif; border: solid 2px #86A5AD; background: white url(images/l
jQuery EasyUI 中文教程：解析与载入详解
- **使用方法**：jQuery EasyUI的解析器主要用于自动识别和初始化页面中的EasyUI组件。`$.parser.parse()`用于解析整个页面，而`$.parser.parse('#cc')`则针对指定的DOM元素进行解析。 - **属性**：`$.parser.auto...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值