5分钟撸一个js图片懒加载(可视区域加载)

阅读 1859
收藏 123
2016-12-31
原文链接:www.talkingcoder.com



<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>图片懒加载(可视区域加载)</title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}
			
			html,
			body {
				width: 100%;
				min-height: 100%;
			}
			
			#SB {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#SB .in {
				border: 1px solid red;
				margin: 10px;
				text-align: center;
				height: 400px;
				width: 400px;
				float: left;
			}
			
			.in img {
				border: none;
				vertical-align: middle;
				height: 400px;
				width: 400px;
			}
		</style>
	</head>

	<body>
		<ul id="SB">
			<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
		</ul>
		<script type="text/javascript">
			var aImages = document.getElementById("SB").getElementsByTagName('img'); //获取id为SB的文档内所有的图片
			loadImg(aImages);
			window.onscroll = function() {  //滚动条滚动触发
				loadImg(aImages);
			};
			//getBoundingClientRect  是图片懒加载的核心
			function loadImg(arr) {
				for(var i = 0, len = arr.length; i < len; i++) {
					if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
						arr[i].isLoad = true; //图片显示标志位
						//arr[i].style.cssText = "opacity: 0;";  
						(function(i) {
							setTimeout(function() {
								if(arr[i].dataset) { //兼容不支持data的浏览器
									aftLoadImg(arr[i], arr[i].dataset.imgurl);
								} else {
									aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));
								}
								arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein
							}, 500)
						})(i);
					}
				}
			}

			function aftLoadImg(obj, url) {
				var oImg = new Image();
				oImg.onload = function() {
					obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象
				}
				oImg.src = url; //oImg对象先下载该图像
			}
		</script>
	</body>

</html>
评论