jQuery简单实现内容加载loading提示效果

图片如下

 

例子

程序代码

 代码如下 复制代码

<style type="text/css">
    #loading{position:fixed;_position:absolute;top:50%;left:50%;width:120px;height:120px;overflow:hidden;background:url(images/loading.gif) no-repeat;z-index:10;display:none;}
</style>

<div id="loading"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#loading").show();//显示loading
        setTimeout("$('#loading').hide();", 5000);//隐藏loading
    });
</script>

例子

1、Html代码

打开header.asp，在<body>下插入

 

 代码如下 复制代码
<div id="loading"></div> 

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>之前插入

 代码如下 复制代码

<script type="text/javascript"> 
jQuery.noConflict(); 
jQuery("#loading").fadeOut() 
</script> 

例子

 代码如下 复制代码

body{
margin: 0;
font-size: 12px;
line-height: 100%;
font-family: Arial, sans-serif;
}
.background {
display: block;
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
background:while;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
.progressBar {
border: solid 2px #86A5AD;
background: white url(progressBar_m.gif) no-repeat 10px 10px;
}
.progressBar {
display: block;
width: 148px;
height: 28px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -74px;
margin-top: -14px;
padding: 10px 10px 10px 50px;
text-align: left;
line-height: 27px;
font-weight: bold;
position: absolute;
z-index: 2001;
}
<div id="background" class="background" style="display: none; "></div>
<div id="progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>
var ajaxbg = $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function () {
ajaxbg.show();
}).ajaxStop(function () {
ajaxbg.hide();
});

 

时间： 2024-09-20 20:38:57

jQuery简单实现内容加载loading提示效果的相关文章

WordPress文章标题链接添加正在加载中提示效果

首先打开你所使用主题的header.php模板文件,在</head>标签前添加:  代码如下 复制代码  <script type="text/javascript" src=" http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script> 如果你的主题已加载了JQuery,这步就免了. 再把下面这段代码同样加到</head>标签前  代码如下

js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】_javascript技巧

本文实例讲述了js实现的页面加载完毕之前loading提示效果.分享给大家供大家参考,具体如下: 一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop =

一个简单的动态加载js和css的jquery代码_jquery

一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the

ajax 动态加载数据提示没有更多内容加载了

问题描述 ajax 动态加载数据提示没有更多内容加载了 怎么判断所有的数据已经加载完毕,提示没有更多内容加载了? if(data=='') 这个判断有误,求高人指点 解决方案 如果是分页你自己服务器端计算好总页数赋值给js变量,然后js设置一个当前页变量,每次加载后和总量对比就好了,干么多请求一次服务器由服务器返回空内容来控制是否加载完呢.. 解决方案二: 不知道你想问什么,data是什么?你的返回值怎么判断没有内容了.你的判断有误怎么得出的结论?有误的时候data什么值 解决方案三: data

jquery实现ajax加载超时提示的方法_jquery

本文实例讲述了jquery实现ajax加载超时提示的方法.分享给大家供大家参考,具体如下: index.php <!doctype html> <html> <head> <meta charset="utf-8"/> <title>加载超时</title> <script type="text/javascript" src="http://lib.sinaapp.com/js

php+ajax+jquery实现点击加载更多内容_jquery

我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录

jQuery Ajax 异步加载显示等待效果代码分享_jquery

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

jQuery Ajax页面局部加载方法汇总_jquery

在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&

jQuery Mobile中动态加载或执行脚本的分析

jQuery Mobile是我新的项目中要用到的移动端框架,之所以要使用它,仅仅是因为它的兼容性很好,页面之间的轮转及其优雅.但是jQuery Mobile的UI我并不喜欢,因此又引入bootstrap.在开发中发现,因为JQM采用ajax的方法加载链接到的页面,所以无法像我们之前的设计 一样,把不同页面的脚本放在head之间,即使将这些脚本转移到body之间,也可能造成一些代码无法执行.本文简单的提几个我自己开发中遇到的情况. 1.框架的init初始事件 使用jquery的习惯就是$(docu