Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现
Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法。同样,ajaxStop()方法则是在所有Ajax请求都完成时调用。这些方法的参数都是一个函数,这个函数将在事件发生时被调用。
使用这些方法的每一步是获取一个页面元素的引用。然后就可以在这个元素上调用ajaxStart()和ajaxStop()方法。
使用语法:
("#loading").ajaxStart(function(){ $(this).show(); //callback }):当一个当Ajax请求开始时将把id为"loading"的内容显示;
("#loading").ajaxStop(function(){ $(this).hide(); //call }):当一个当Ajax请求结束时将把id为"loading"的内容隐藏;
在开发的过程当中,我一般会用它们来做页面等待进度图片的显示,即所有用ajax加载又不能很快加载完成的(有时页面很慢半天没显示),那么将自动调用ajaxStart显示一个等待的图片出来(我一般会用Wbox做弹出一个透明的层),等页面所有内容ajax加载完成,再关闭该层;
为了便于大家的理解,我举个简单的例子,希望对大家有帮助:
先把需要的说一下,jquery库,图片一张(等待进度的就可以,网上很多),OK,可以开始了:
index.php文件内容如下:
<script src="jquery.js"></script>
<a href="#" id="o">o</a><br />
<a href="#" id="p">p</a><br />
<a href="#" id="q">q</a><br />
<div id="loading" > <div id="content"></div>
<script>
$(document).ready(function(){
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){//ajaxStop改为ajaxComplete也是一样的
$(this).hide();
});
$("#o").click(function(){
$.post("for.php?id=o",function(data){
$("#content").html(data);
});
})
$("#p").click(function(){
$.post("for.php?id=p",function(data){
$("#content").html(data);
});
})
$("#q").click(function(){
$.post("for.php?id=q",function(data){
$("#content").html(data);
});
})
})
</script>
for.php内容如下:
<?php
if($_GET['id'])
{
for($i=0;$i<3;$i++)
{
sleep(4);//为了模范我们平时打开页面很慢,使用sleep函数,让ajax加载时等待12秒;
echo $_GET['id'];
}
}
?>
OK,把该两个文件和jquery库,图片放于你根目录下的同一目录,访问index.php后,点o或p或q,你先会看到等待进度图片,加载完成在<a>的下面层显示ajax加载的内容ooo或ppp或qqq并关闭等待加载的图片,详细的大家可以试试,用多了自然能体会到它的好处,呵呵···
最后要提醒的是,ajaxStart与ajaxStop都是全局方法,无论创建他们的代码放在何处,只要有ajax执行,他们都会执行。如果在此页面的其他地方也使用了ajax,该全局函数同样执行,因为他们是全局的。如果想使某个ajax不受全局方法的影响,那么可以在$.ajax(options)方法中,将参数中的global设置为false,如:
$.ajax({
url:"test.html",
global:false
});
Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现的更多相关文章
- jQuery Ajax封装(附带加载提示和请求结果提示模版)
1.创建HTML文件(demo) <!doctype html> <html lang="en"> <head> <meta charse ...
- jQuery+Ajax滚屏异步加载数据实现(附源码)
一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...
- JQuery/JS插件 jsTree加载树,预先加载,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点
jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...
- fakeLoader页面加载前loading演示8种效果
提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...
- JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
- AJAX 基本结构 数据加载
AJAX -- 网页数据异步加载 .ashx 一般处理程序 json 数据格式,在不同的语言之间传递数据 对象格式: "{"key":"value& ...
- ASP.NET Ajax 客户端框架未能加载、"Sys"未定义
在Windows Server 2003 系统上部署asp.net项目出现以下问题: IIS为6.0 导致菜单控件的图片显示不出来: WebSite:程序中的图片显示正常. 但用到ASP.net 2. ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Ionic页面加载前 ionic页面加载完成 ionic页面销毁执行的事件
ionic 中$ionicView.beforeEnter(页面刚加载前) $ionicView.afterEnter (页面加载完成) $destroy(页面销毁) 广播事件 //ionic c ...
随机推荐
- 堆-STL
往堆中加一个元素的算法(put): #include<algorithm> void put (int d) { heap[++heap_size]=d; push_heap(heap+, ...
- 网易云音乐 歌词制作软件 BesLyric (最新版本下载)
导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 哈哈,喜欢网易云音乐,又愁于制作歌词的童鞋有福啦!Beslyric 为你排忧解难! 本文 ...
- TerraGate软件安装后,服务无法启动的解决方法
前些天有朋友问,TerraGate安装后,服务无法启动,而且启动按钮也是不可用的状态,不知道是为什么,如下图: 打开TerraGate的安装目录,发现里面缺少一些文件,如下图: *解决办法: 重新安装 ...
- LOJ2803 CCC2018 平衡树 数论分块、记忆化搜索
传送门 题意差评,其实就是一个递推式:\(f_1 = 1 , f_i = \sum\limits_{j=2}^i f_{\lfloor \frac{i}{j} \rfloor}\),然后求\(f_N\ ...
- Unexpected error from external database driver (1)
当尝试把Excel导入SQL时,发生此异常: Unexpected error from external database driver (1). 在网上查找到一个解决方法,网址http://dat ...
- Intel Digital Innovation Industry Summit(2018.08.17)
时间:2018.08.17地点:北京金隅喜来登大酒店
- sql字符串累加
函数 stuff(param1, startIndex, length, param2) 函数说明将param1中自startIndex(SQL中都是从1开始,而非0)起,删除length个字符,然后 ...
- 2-SAT超入门讲解
Preface 说实话2-SAT的题目我都没怎么做过,所以这里讲的都是些超入门什么的 还有一些板子题,由于是暑假的时候学的所以有些我也记不清了 主要学习参考自:Mancher的课件&& ...
- windows服务中对外提供API接口
public class SendMqService { private static bool isExcute = true; private static HttpListener listen ...
- 最全的前端Git基础命令,看完保证你会!
常见信息 master: 默认开发分支 origin:默认远程版本库 Head: 默认开发分支 Head^:Head 的父提交 创建新仓库 git init git init [project-nam ...