纯javascript实现图片延时加载方法_javascript技巧

随着页面信息越来越丰富饱满，尤其像淘宝，京东之类的购物网站，首页就是他们的生命线，- -||||

最近在做某银行的网站，只有挤上首页才能得到更多的关注，于是乎各种业务人员就开始了首页位置之争，为了平息他们的战乱。体现我大度包容的一面 ，啊哈哈哈

首页囊括了他们全部的需求，他们满意的走人了，结果技术经理来了，说首页加载怎么这么大，于是乎，减！！！

首当其冲，缩小图片K数，不够，那怎么办，好吧，进入正题。长页面未显示的部分可以先不加载，省流量就是省钱，开搞！！！

思路就是，判断图片在页面中的位置，如果图片的位置大于小于当前的屏幕高度，那么显示图片，否则隐藏图片。

怎么一开始隐藏图片呢，很简单，,给一个浏览器不认识的属性csii_src,当需要显示图片的时候在element.src=element.getAttribute("csii_src");,思路很简单吧，上代码了。

不足之处，页面结构必须已定好，图片的高度必须设置好，不然，无法计算图片距离顶部的高度。需注意。

我们再来看下另外一个小伙伴是如何实现的

思路如下：先在标签中将src的值设置为一个极小的图片文件路径，alt属性的值设置为真正要显示的图片文件路径，当向下滚动到图片的位置时，将src的值替换为alt的值，这样就会自动加载真正要显示的图片了，同时，给标签设置一个值为lazy的class，加载完了之后，将其值设置为notlazy，以此来判断哪些图片需要加载，哪些不需要。

代码中的注释已经很清楚了，各位自己慢慢看吧。欢迎扔砖，更欢迎各种改进和完善的建议。