<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajaxStart和ajaxStop事件</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Button1").click(function(){
$("#x").load("mm.zip");//在这里发出AJAX请求 为看出调用的顺序,这里的mm.zip是近20兆的大文件
});
$("#my").ajaxStart(function(){
//AJAX请求发起以前执行ajaxStart函数的回调函数,也就是在load以前执行
$(this).show();
}).ajaxStop(function(){
//AJAX请求发起以后执行ajaxStop函数的回调函数,也就是在load以后执行
$(this).hide(5000);
});
});
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
<div id="my" style="border:1px red solid;width:700px;height:600px;display:none">
<img src="../1.jpg" />
</div>
<div id="x"></div>
</body>
</html>