原生js实现图片懒加载代码

<div class="container"></div>

*{
	margin: 0;
	padding: 0;
}
.container{
	overflow: hidden;
	width: 100%;
}
.img_item{
	float: left;
	text-align: center;
	width: 25%;
	height: 592px;
	margin-bottom: 40px;
}
.img_item>div{
	display: none;
	line-height: 30px;
}

// 渲染页面
var html =``;
var container=document.getElementsByClassName('container')[0];
for(var i=0;i<30;i++){
	html=html+`
		<div class="img_item">
			<img data-src="images/1.png" alt="" />
			<div>我是第1张图片</div>
		</div>
	`;
}
container.innerHTML=html;


// 懒加载实现
function lazy_loading() {
	var doc = document;
	var win = window;
	// clientHeight是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距
	var clientHeight = doc.documentElement.clientHeight || doc.body.clientHeight;
	var html_scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop || win.pageYOffset;
	var img_item = doc.querySelectorAll('.img_item>img');
	var img_describe = doc.querySelectorAll('.img_item>div');
	var img_item_len = img_item.length;
	for (var i = 0; i < img_item_len; i++) {
		// Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
		var img_itemRect = img_item[i].getBoundingClientRect();
		var data_src = img_item[i].getAttribute('data-src');
		//当元素的offsetTop-html_scrollTop<clientHeight时元素在可是区域内
		//或者当元素的getBoundingClientRect().top<clientHeight时元素在可是区域内
		if (img_itemRect.top < clientHeight - 100) { //主要的事情说三遍：在你的正式代码中不要-100，在你的正式代码中不要-100，在你的正式代码中不要-100，我这只是为了看效果
			img_item[i].setAttribute('src', data_src);
			img_describe[i].style.display = 'block';
		}
	}
}
lazy_loading(); //第一次加载
if (window.attachEvent) {
	window.attachEvent('onscroll', function() {
		lazy_loading();
	})
} else {
	window.addEventListener('scroll', function() {
		lazy_loading();
	})
}