判断多个图片是否加载完成

前几天做项目的时候遇到一个问题，一组图片，判断全部载入完成，今天优化了一下写成jQuery插件。

注：jQuery插件。。。（原创哦）

(function(){
	$.fn.imgLoad = function(options){
		var opts = $.extend({
			time:4000, ///等待载入时间，如果超过这个时间就直接执行回调
			callback:function(){} //默认回调
		}, options);
		var $this = this,i = 0, j = 0, len = this.length;
		$this.each(function(){
			var _this = this,
				dateSrc = $(_this).attr("date-src"),
				imgsrc = dateSrc?dateSrc:_this.src;
			var img = new Image();
			img.onload = function(){
				img.onload = null;
				_this.src = imgsrc;
				i++;
			};
			img.src = imgsrc;
		});
		var t = window.setInterval(function(){
			j++;
			$("#msg").html(i);
			if (i==len || j*200>=opts.time){
				window.clearInterval(t);
				opts.callback();
			};
		},200);
	}

})(jQuery);

html结构

注：date-src 属性 是真实的图片地址 src放一个loading...的gif 图片 ，不带date-src 也是可以的！！！

<img date-src="http://dl.yzz.cn/public/images/100608/29_161214_3.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif" />
<img date-src="http://www.asianfinancialforum.com/aff2010/eng/photos/images/large/p8.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif"  />
<img date-src="http://www.asianfinancialforum.com/aff2010/eng/photos/images/large/p13.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif" />

调用

$(function(){
	$("img").imgLoad({
		time:10000000,//设置足够大 须等待图片载入完成，但是404的时候就杯具了...
		callback:function(){
			alert("载入完成")	
		}
	});	
})