用js实现图片懒加载

var imgs = $('img');
			var lazyload = function() {
				// 获取浏览器滚动高度
				var scrollTop = $(document).scrollTop();
				// 获取浏览器可视高度
				var winTop = $(window).height();

				$('img').each(function(i, el) {
					// 如果元素距离文档顶部的高度小于浏览器的滚动高度加浏览器的可视高度，则需要加载
					// $(this).offset().top：图片元素距离文档顶部的高度
					if ($(this).offset().top < scrollTop + winTop) {
						// 为需要加载的图片的 src 属性赋值
						$(this).attr('src', $(this).data('src'));
					}
				});
			}

			// 节流函数
			function throttle(method, delay) {
				var timer = null;
				return function() {
					clearTimeout(timer); // 执行之前清除上一个
					timer = setTimeout(function() {
						method(); // 执行懒加载方法
					}, delay);
				};
			}
			// 打开网页先加载可视区域的图片
			window.onload = lazyload();
			// window.onscroll 是鼠标滚动事件
			window.onscroll = throttle(lazyload, 200);

html:可以这样写

<img src="img_item data-src="这里面是真正的图片地址">