标签存档: jquery

16个CSS3和jQuery加载动画

spin.js

CSS3 Loading Animation Loop

CSS3 Loading Animation

CanvasLoader Creator

Flickr Style Loading Animation Using JQuery

CSS Loading Animation Circle Style

Loading CSS spinners and bars generator for AJAX & JQuery

Ajax Style Loading Animation in CSS3 (no Images)

CSS3 loading spinners without images

Bouncy Animated Loading Animation

Sonic – looping loaders

Simple Loading Modal

PageLoading – jQuery plugin

Image Loader (jQuery Plugin)

Simple Content Loader

Preloadify

[记录] Spring3 MVC中Ajax的使用

现在已经开始使用Spring3了,MVC虽然用了很久不过Ajax一直通过DWR实现,不过既然Spring3已经支持Ajax访问,那就必须折腾下了。

1. 首先,新建Controller类用于接收ajax请求,这里建立AjaxCheckController,目的是检查注册用户是否已经存在

@Controller
@RequestMapping("/a")
public class AjaxCheckController extends BaseController {

	@Autowired
	private UserManager userManager;

	@RequestMapping(value = "/checkexists/loginname/{loginName}", method = RequestMethod.GET)
	public @ResponseBody Map<String, Object> checkLoginNameExists(@PathVariable String loginName) {
		User user = userManager.findUserByLoginName(loginName);
		Map<String, Object> modelMap = new HashMap<String, Object>();
		modelMap.put("exists", user != null);
		return modelMap;
	}

	@RequestMapping(value = "/checkexists/email", method = RequestMethod.GET)
	public @ResponseBody Map<String, Object> checkEmailExists(@RequestParam(value = "email", required = true) String email) {
		User user = userManager.findUserByEmail(email);
		Map<String, Object> modelMap = new HashMap<String, Object>();
		modelMap.put("exists", user != null);
		return modelMap;
	}

}

2. 请求页面,在这里就是注册页面了,部分js代码如下:

function loginOnChange(event) {
	        	....
		        	$.ajax({
				        type : 'GET',
				        contentType : 'application/json',
				        url : 'a/checkexists/loginname/'+loginname,
				        dataType : 'json',
				        success : function(data) {
					          if (data && data.exists) {
						        log_tip_div.style.display = "inline";
								log_tip.innerHTML="<img src='<@common.basePath/>/img/exclamation.gif'/> 该用户名已经被使用";
								canSub = false;
								loginUserError = true;
								isLoginUserExists = true;
					          }else {
								log_tip_div.style.display = "inline";
								log_tip.innerHTML="<img src='<@common.basePath/>/img/fit.gif'/> 用户名可以使用";
								canSub = true;
								loginUserError = false;
								isLoginUserExists = true;
							  }
				        },
				        error : function() {
				          alert("error")
				        }
			    	});

				.....
	        }

	        function emailOnChange(event) {
	        	....
	        		$.ajax({
				        type : 'GET',
				        contentType : 'application/json',
				        url : 'a/checkexists/email',
				        data: 'email='+email,
				        dataType : 'json',
				        success : function(data) {
							if (data && data.exists) {
								email_tip_div.style.display = "inline";
								email_tip.innerHTML="<img src='<@common.basePath/>/img/exclamation.gif'/> 该邮箱已经注册过";
								canSub = false;
								emailError = true;
								isEmailExists = true;
							} else {
								email_tip_div.style.display = "inline";
								email_tip.innerHTML="<img src='<@common.basePath/>/img/fit.gif'/> 邮箱未被注册过,可以使用";
								canSub = true;
								emailError = false;
								isEmailExists = true
							}
						},
				        error : function() {
				          alert("error")
				        }
			    	});
				....
	        }

到此就可以了,可以通过jquery轻松访问Spring的Controller,是不是很简单呀!

通过触发appear, 在LazyLoader中载入未加载的图片

如果网页是以tab方式切换显示的, 并且切换的内容也是隐藏方式加载的, 那么如果使用了LazyLoader的话, 页面第一次加载时并不会加载隐藏内容中的图片, 在通过动态方式显示隐藏内容时, 图片会是未加载的效果, 这样比较影响用户体验.

看源码, LazyLoader中通过获得appear的事件加载图片的, 所以很简单的只要我们在显示隐藏内容的时候触发相应的appear事件就可以加载隐藏内容中的图片了.

代码如下:

jQuery("#divid img").trigger("appear");
同样发布在: 通过触发appear, 在LazyLoader中载入未加载的图片