div背景图片的loading解决方案

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
		<title></title>
		<style>
			.div {
				width: 300px;
				height: 300px;
				background-size: cover;
				position: relative;
			}
			
			.div1 {
				background-image: url(http://img06.tooopen.com/images/20161010/tooopen_sy_181352973287.jpg);
			}
			
			.div2 {
				background-image: url(http://img06.tooopen.com/images/20161027/tooopen_sy_183292916159.jpg);
			}
			
			.jz {
				position: absolute;
				width: 100%;
				height: 100%;
				text-align: center;
				vertical-align: middle;
				font-size: 36px;
				color: #FFFFFF;
				background: #666666;
			}
			
			.jz:after {
				content: "";
				display: inline-block;
				height: 100%;
				width: 0px;
				vertical-align: middle;
			}
		</style>
	</head>

	<body>
		<div class="div div2"></div>
		<br>
		<div class="div div1"></div>
	</body>
	<script>
		var lod = function(obj, sh, fn) {
			var _obj = $(obj);
			var _r = /http(.*)\.\w*/g;
			var obj = {
				obj: $(obj),
				sh: $(sh),
				boot: function() {
					if(this.def.auto) {
						this.init();
					}
				},
				init: function() {
					var _this = this;
					this.obj.map(function(_list) {
						var _listobj = $(_obj[_list]);
						var _sh = _this.sh.clone();
						_listobj.append(_sh);
						var _imgsrc = _listobj.css("background-image");
						var _str = _imgsrc.match(_r);
						var _img = $("<img></img>");
						_img.on("load", function() {
							fn(_sh, _listobj);
						});
						_img.attr("src", _str[0]);
					});
				}
			}
			obj.init();
			return obj;
		}

		$(function() {
			lod(".div", "<div class='jz'>loading </div>", function(load, list) {
				load.fadeOut(1000, function() {
					load.remove();
				});
			});
		});
	</script>

</html>
文章分类
近期文章