jq scrollLoading轻量级图片延时懒加载并发优化版

图片懒加载技术在web上应用非常广泛，滚动加载可视区域内的图片，减少服务器压力，提升页面加载速度。

图片延时加载用的比较多的应该是LazyLoad和scrollLoading，但是lazyLoad体验不好。scrollLoading这个JQ插件还可以，而且体积小，使用也方便。

但scrollLoading也有一处体验不是很好的，网站内容少的时候倒没啥感觉，当内容（特别是图片）多的时候，就会有体验问题，比如门户、商城类的网站，首页每屏图片达到10张以上的时候，因为scroll的时候，这一屏的图片都在可视区域，scrollLoading在$.each的时候会把这些图片全部加载，瞬间并发，服务器也难受。。

之前博主用这个插件的时候也没感觉到什么，在客户网站上用的时候，因为客户服务器开流量限制了，会造成部分图片加载不出来，或者当你滚动条滑动快的时候也会出现这种情况。无奈，，改了下逻辑，虽然不是最佳的方案，但也达到了效果！

本优化版的scrollLoading多了一个参数：timer，下面是scrollLoading的参数说明：

下面附scrollLoading优化版的源码：

(function($){$.fn.scrollLoading=function(options){var defaults={attr:"data-url",container:$(window),callback:$.noop,timer:10,};var params=$.extend({},defaults,options||{});params.cache=[];$(this).each(function(){var node=this.nodeName.toLowerCase(),url=$(this).attr(params["attr"]);var data={obj:$(this),tag:node,url:url};params.cache.push(data)});var callback=function(call){if($.isFunction(params.callback)){params.callback.call(call.get(0))}};var loading=function(){var contHeight=params.container.height();if($(window).get(0)===window){contop=$(window).scrollTop()}else{contop=params.container.offset().top}var ii=1;$.each(params.cache,function(i,data){var o=data.obj,tag=data.tag,url=data.url,post,posb;if(o){post=o.offset().top-contop,post+o.height();if(o.is(':visible')&&(post>=0&&post<contHeight)||(posb>0&&posb<=contHeight)){ii++;setTimeout(function(){if(url){if(tag==="a"||tag==="i"){callback(o.attr("style",'background-image:url('+url+')'))}else if(tag==="img"){callback(o.attr("src",url))}else{o.load(url,{},function(){callback(o)})}}else{callback(o)}data.obj=null},ii*params.timer)}}})};loading();params.container.bind("scroll",loading)}})(jQuery);