图片延迟加载

这是我的第一篇真正意义上的博客，希望对大家有用。

这篇文章适用于新手，（ps:没办法，能力有限）

直接上代码吧

这是用jq写的，用的时候记得导入jq文件

<img src="" data-src="取代src 的值" />

function imgLoad(){
	var IMG_TOP_LEN;
	var WINDOW_TOP_LEN;
	var WINDOW_SCROLL_TOP;
	/*获取屏幕高度*/
	var  WINDOW_HEIGHT;
	WINDOW_HEIGHT = $(window).height();
	/*屏幕高度以内的所有IMG都加载*/
	function load(h){
		$("img[data-src]").each(function(){
			IMG_TOP_LEN = $(this).offset().top;
			if(IMG_TOP_LEN <= h){
				$(this).attr("src",$(this).attr("data-src")).removeAttr("data-src");
			}
		})
	} load(WINDOW_HEIGHT)
	/*滑动时加载图片*/
	window.onscroll = (function(){
		WINDOW_SCROLL_TOP = $(window).scrollTop();
		load(WINDOW_HEIGHT+WINDOW_SCROLL_TOP);
	})
}

下面是原理：

首先确定需求：图片延迟加载

=》如何加载？（通过滑动屏幕时再加载对应的图片）

=》图片加载的原理？（最简单的原理，通过img的src属性获取）

=》怎么实现需求？（我个人的理解：1、加载出屏幕高以内的所有img图片，2、滑动时获取屏幕滑动的距离，再加载滑动距离+屏幕高度以内的图片）

有了这几步，思路应该就可以很清晰了，下一步就是代码实现了；

我首先是写了个load()方法；这个方法的实参是要显示图片的高度，

我的实现方法是首先用each方法遍历所有的img节点，然后获取当前img节点距离顶部的高度的值也就是IMG_TOP_LEN

然后判断是否大于当前参数（要显示图片的高度），如果大于，那么将其data-src属性换给src同时删除其data-src属性

为了保证开始在屏幕高度内可以直接显示，直接执行这个load()方法，参数设置为屏幕的高度

后面实时监测（获取）屏幕的滑动距离也就是上面的

WINDOW_SCROLL_TOP = $(window).scrollTop();

如果当前屏幕有向下滑动，获取将 对应滑动的高度+实际的屏幕高 以内的所有img节点的src属性的值换为

（在这里我是使 img 的src 属性为空  然后把实际的链接 放置在 data-src 属性里面）

data-src 的属性值，然后这个简单的图片延迟加载就完成了。。具体的我就不细说了，如果有疑问，可以留言哦