SOURCE

/* 获取节点 */
		var oUl = document.getElementsByTagName('ul')[0];
		var aimg = oUl.querySelectorAll("li img");

		function aftLoadImg(obj) {
			var src = '';
			if(obj.dataset.src) {
				src = obj.dataset.src;
			} else {
				src = obj.getAttribute('data-src');
			}
			//预加载
			var oImg = new Image();
			oImg.src = src; //oImg对象先下载该图像
			if(oImg.complete || oImg.width) {
				obj.src = oImg.src;
			} else {
				oImg.onload = function() {
					obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象
				}
			}
			oImg.onerror=function(){obj.src="http://www.86y.org/images/failed.png"} 
		}

		//      判断图片是否已经缓存
		//		function aftLoadImg(obj) {
		//			var src = '';
		//			if(obj.dataset.src) {
		//				src = obj.dataset.src;
		//			} else {
		//				src = obj.getAttribute('data-src');
		//			}
		//			//预加载
		//			var oImg = new Image();
		//			oImg.src = src; //oImg对象先下载该图像
		//			if(oImg.complete||oImg.width) {
		//				console.log('该图片已经存在于缓存之中，不会再去重新下载');
		//				obj.src = oImg.src;
		//			} else {
		//				console.log('图片不存在缓存之中');
		//				oImg.onload = function() {
		//					console.log('图片下载成功！');
		//					obj.src = oImg.src;
		//				}
		//			}
		//		}

		/* 滚动实时计算所到区域并进行相关计算 */
		window.onscroll = function() {
			var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);
			for(var i = 0; i < aimg.length; i++) {
				if(aimg[i].getBoundingClientRect().top < 1.5 * t) {
					setTimeout('aftLoadImg(aimg[' + i + '])', 500)
				}
			}
		}

		/* 页面加载完便执行一次滚动函数 */
		window.onload = function() {
			window.onscroll();
		}

<ul>
			<li><img src="" data-src="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile17s.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
			<li><img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
			<li><img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
			<li><img src="" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
			<li><img src="" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
			<li><img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
			<li><img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
			<li><img src="" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
			<li><img src="" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
			<li><img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
			<li><img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
			<li><img src="" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
			<li><img src="" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
			<li><img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
			<li><img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
			<li><img src="" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
			<li><img src="" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
			<li><img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
			<li><img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
			<li><img src="" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
			<li><img src="" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
			<li><img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
			<li><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
			<li><img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
			<li><img src="" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
		</ul>

* {
			margin: 0;
			padding: 0;
		}
		ul {
			overflow: hidden;
	    text-align: center;
		}
		li {
			list-style: none;
			width: 200px;
			height: 200px;
			border: 1px solid #ccc;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			float: left;
			overflow: hidden;
			position: relative;
		}
		li i {
			width: 20px;
			height: 20px;
			border-radius: 20px;
			position: absolute;
			border: 2px solid #6feb95;
			z-index: 0;
			left: 50%;
			top: 50%;
			margin-top: -11px;
			margin-left: -11px;
			animation: move 1s infinite;
			-webkit-animation: move 1s infinite;
		}
		li i:before {
			position: absolute;
			width: 5px;
			height: 5px;
			border-radius: 4px;
			content: '';
			box-shadow: 0 0 10px #666;
			-webkit-box-shadow: 0 0 10px #666;
			background: #fff;
			border: 1px solid #fff;
			top: -3px;
			left: 50%;
			margin-left: -3px;
		}
		img {
			vertical-aimggn: middle;
			border-width: 0;
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;
		}
		@keyframes move {
			0% {
				transform: rotateZ(0);
			}
			100% {
				transform: rotateZ(360deg);
			}
		}
		@-webkit-keyframes move {
			0% {
				-webkit-transform: rotateZ(0);
			}
			100% {
				-webkit-transform: rotateZ(360deg);
			}
		}