图片延迟加载效果

图片延迟加载效果（图片需自己添加）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片的延迟加载效果</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#outer {
			width: 1200px;
			margin: 100px auto 0;
		}
		#outer h1 {
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 30px;
			margin-bottom: 20px;
		}
		#con img {
			float: left;
			width: 590px;
			height: 350px;
			margin: 5px;
		}
	</style>
</head>
<body>
	<div id="outer">
		<h1>图片展示</h1>
		<div id="con">
			<img orc="images/001.jpg" alt="">
			<img orc="images/002.jpg" alt="">
			<img orc="images/003.jpg" alt="">
			<img orc="images/004.jpg" alt="">
			<img orc="images/005.jpg" alt="">
			<img orc="images/006.jpg" alt="">
			<img orc="images/007.jpg" alt="">
			<img orc="images/008.jpg" alt="">
			<img orc="images/009.jpg" alt="">
			<img orc="images/010.jpg" alt="">
			<img orc="images/011.jpg" alt="">
			<img orc="images/012.jpg" alt="">
			<img orc="images/013.jpg" alt="">
			<img orc="images/014.jpg" alt="">
			<img orc="images/015.jpg" alt="">
			<img orc="images/016.jpg" alt="">
			<img orc="images/017.jpg" alt="">
			<img orc="images/018.jpg" alt="">
			<img orc="images/019.jpg" alt="">
			<img orc="images/020.jpg" alt="">
			<img orc="images/021.jpg" alt="">
			<img orc="images/022.jpg" alt="">
		</div>
	</div>
	<script>
		window.onload = window.resize = window.onscroll = function() {
			var $ = function(id) {
				return document.getElementById(id);
			}
			var imgs = $('con').children;
			var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
			var windowH = document.documentElement.clientHeight || document.body.clientHeight;
			console.log(imgs.length);
			//获取元素到body的距离
			function offsetTL(obj) {
				var l = 0, t = 0;
				while(obj) {
					l = l + obj.offsetLeft + obj.clientLeft;
					t = t + obj.offsetTop + obj.clientTop;
					obj = obj.offsetParent;
				}
				return {left: l, top: t};
			}
			for (var i = 0; i < imgs.length; i++) {
				if(offsetTL(imgs[i]).top <= scrolltop + windowH) {
					imgs[i].src = imgs[i].getAttribute('orc');
				}
			}
		}
	</script>
</body>
</html>

　　

posted @ 2016-09-10 15:09  HandsomeHan  阅读(271)  评论(0)    收藏  举报