jQuery页面滚动图片等元素动态加载实现

常常会有这样子的页面，内容很丰富，页面很长，图片较多。比如说光棍节很疯狂的淘宝商城页面。

或者是前段时间写血本买了个高档耳机的京东商城页面，或者是新浪微博之类。

这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。乖乖，估计黄花都变成黄花菜了。所以，我们得做点什么，避免这种糟糕的状况发生。目前很流行的做法就是滚动动态加载，显示屏幕之外的图片默认是不加载的，随着页面的滚动，这个要显示图片的区域进入了浏览器可是窗口范围，则触发图片的加载显示。这种做法的好处是，一是页面加载速度快（浏览器转啊转的圈圈或是进度条很快就玩完了），二是节约了流量，因为不可能每个用户浏览页面时从头滚到尾的。

貌似我上面提到的几个站点就是采用的这种做法，例如，我以迅雷不及掩耳的速度从淘宝商城首页截下来的已触发滚动加载但是未加载完毕的图片：

这是提高前端性能，优化页面加载速度很实用的做法。看上去这种技巧有些技术门槛，其实很简单的。我们需要一个滚动事件，然后判断元素是否在浏览器窗口，然后，显示图片（或是其他元素）就可以啦。我在jQuery库下写了个实现此效果的插件，下面就将简单展示讲解此插件的使用以及滚动动态加载的实现。