jquery: 让系统中所有ajax请求都伴随“菊花转”

怎么样只写一次代码,能让系统中所有ajax请求都伴随“菊花转” ?

1. 去下载一个转菊花的gif, 放到系统中,让它有个url

2. 写一个公用的js文件如my.js, 并在每个页面中都包含它。

3. 在my.js中写两部分代码

//1. 文档加载完后,把菊花的动画声明为一个居中、暂时隐藏的dom元素,并把它加入到body中
		$( document ).ready(function() {
			//生成一个ajax loading dom
			$('body').append('<div style="display:none;width:100px;margin:0 auto;position:fixed;left:45%;top:45%;" id="loading"><img src="http://someSite/juhua.gif" /></div>');					
		});	

//2. 全局配置:ajax请求开始时显示动画,结束时(success 或 error)隐藏动画
	 $(document).ajaxStart(function () {			
		    $("#loading").show();
	 });

		$(document).ajaxComplete(function () {			
			$("#loading").hide();
	});	

注意事项:

1. 如果某个ajax请求不需要菊花,则在这次请求中设置global为false, 即不使用全局设置:

	
	 
        $.ajax({  
            url: ...
            type: "post",                  
            global: "false",   
            ...
          });
	 

2. 已经发现一个问题:如果在某个ajax的callback中启动了另一个ajax请求,则第二个ajax请求启动时不会触发ajaxStart()事件,导致系统执行第2个ajax请求时不会出现菊花。一个简单的解决办法就是确保第2个请求能够执行的够快,这样即使没有菊花用户体验也能接受。

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.