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

阅读108 评论0
图片懒加载技术在web上应用非常广泛,滚动加载可视区域内的图片,减少服务器压力,提升页面加载速度。图片延时加载用的比较多的应该是LazyLoad和scrollLoading,但是lazyLoad体验不好。scrollLoading这个JQ插件还可以,而且体积小,使用也方便。但scrollLoading也有一处体验不是很好的,网站内容少的时候倒没啥感觉,当内容...

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

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


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


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


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

参数默认释义
attrdata-url获取图片地址的属性名
container$(window)滚动的容器。默认为$(window),也就是默认的网页滚动。
callback$.noop

回调。图片动态加载完毕后执行的回调函数。

其中回调函数的上下文this就是当前DOM元素。

注意:如果无法获取元素加载地址,则不执行动态加载,但是会触发回调。

在某些需求下,您可以缺省url值,仅仅触发回调。

timer10
图片加载间隔时间,减少并发。单位:毫秒


下面附scrollLoading优化版的源码:

(function($){$.fn.scrollLoading=function(options){var defaults={attr:"data-url",con

0 位网友评论:

欢迎 来评论

请填写验证码