前言：以前总是再看，今天第一次写文章，欢迎发现，提出不足

实现思路：以图片为例

思路：

• 在图片中设置自定义属性data-img="图片地址"，图片默认的地址统一选择一个提示图片之类的

• 图片在页面中距离顶部的高度imgHeight

  与页面滚动出去的高度scrollTop

  屏幕的高度 screenHight

判断imgHeight 与（scrollTop+screenHight）

• 当imgHeight 小于 （scrollTop+screenHight） 则把真实的图片地址赋给img 的src属性

html代码部分：

<div class="container1">
	<ul>
		<li>
			<a href="javascript:void(0)">
				<img data-img="img/img1.png" src="img/blank.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:void(0)">
				<img data-img="img/img2.png" src="img/blank.jpg">
		    </a>
		</li>
	   <!-- 以下省略多个相同的li标签-->
	</ul>
</div>

js代码

$(function () {
	$.fn.extend({
		lazyLoad: function () {
			var imgs = $(this).find("img");
			
			var screenHight = $(window).height();
			
			$(window).on("scroll", function () {
			
				var scrollTop = $(window).scrollTop();
				
				imgs.each(function (index, item) {
					//如果loaded为true 则加载过
					if ($(item).attr("data-loaded")) {
						return;
					} else {
						var imgHeight = $(item).offset().top;
						//当滚动出去的距离+屏幕高度 >图片距离顶部的高度
						if (screenHight + scrollTop > imgHeight) {
							var src = $(item).attr("data-img");
							$(item).attr("src", src);
							//设置loaded标记
							$(item).attr('loaded', true);
						}
					}
				})
			}).trigger("scroll");
		}

	})
})

//中间做了点优化
//loaded标记  是标记图片是否已经加载过