最一段代码,是一段原生的图片加载器,可以实现如下功能,就目前自认为最牛X的页面图片加载器,已经过京东首页测试,IE6 7 8,chrome ,
ff完美测试通过.
先说下它到底NB在哪里,
1.原生js实现,客户端性能NB.,不依靠任何框架.
2.可以支持两种方式的图片加载
<img src="images/blank.png" data-src="images/abstract_brushes.jpg" data-defer="5000"/>
<img src="images/blank.png" data-src="images/abstract_lake.jpg" />
第一种方式表示这个图片在dom加载完毕过后,图片会在5S后才请求,第二种没有deta-defer参数的表示图片是滚动加载的,如果图片出来在可视范围
内会自动加载.延迟5000的前提条件是我的这段js代码放在body之前,紧靠body
3.在bind scoll事件的时候不会平凡触发加载图片,中间会有个时间戳,这一步大大提升性能,不会因为用户的不停滚动,而照成客户端性能问题,
4. 凡是已经加载过得图片,都不会再次去遍历,这一步大大提升性能
5. 在scoll事件中所有得图片都加载完毕了,后自动清除scroll事件,
6. 调用之简单,nothingLazyLoad();就可以实现网站上所有得图片lazyLoad,默认可以传一个时间参数,如nothingLazyLoad(2000),表示这个页面
的所有图片都会在2000s以某种方式加载,其中就是上面第二点得2种方式加载,
接下来测试下京东首页的图片用我的loazLoad,那是什么效果,一个字犀利加效率,我的这个lazyLoad属于作者个人心得所悟,占不贴我的
源码,只有测试代码, 我把京东网站上自带的jQuery的 lazyLoad贴出来,然后删除掉,用我的,
function lazyload(option) { var settings = { defObj: null, defHeight: 0 }; settings = $.extend(settings, option || {}); var defHeight = settings.defHeight, defObj = (typeof settings.defObj == "object") ? settings.defObj.find("img") : $(settings.defObj).find("img"); var pageTop = function () { var d = document, y = (navigator.userAgent.toLowerCase().match(/iPad/i) == "ipad") ? window.pageYOffset : Math.max(d.documentElement.scrollTop, d.body.scrollTop); return d.documentElement.clientHeight + y - settings.defHeight }; var imgLoad = function () { defObj.each(function () { if ($(this).offset().top <= pageTop()) { var src2 = $(this).attr("src2"); if (src2) { $(this).attr("src", src2).removeAttr("src2") } } }) }; imgLoad(); $(window).bind("scroll", function () { imgLoad() }) } 以上代码是他首页里面的,我只是贴出来,然后把他删掉,用我的lazyLoad,然后我会改掉他首页img标签的参数形式,用我这个组件肯定得按照我的
参数形式写img标签,两种不同的加载方式,已列在优势第二点,可以在一个页面混合使用,比如一个图片切换里面的所有图片,
显然是使用第一种参数形式,
好了,废话不多说,上测试连接地址,性能NB那才叫NB.我的这个京东测试demo是两种方法混合使用的,你会看到有得图片会在7 8s后才会请求
测试地址:① nothingDemo1 ②nothingDemo2
是不是浏览起来很顺畅,很NB的加载,其中demo中data-defer方式加载的图片有logo,还有中间一点的图片,大概是7 8s后才请求,其余图片
大概都是滚动加载或者出现在可视范围自动加载.我的实现代码属于个人作品,赞不公布,请大家谅解.但是上面我提供的六点优势已经把思路
说的很清楚了.
如果能看懂这段代码js的高手,忘指教,求留言.
代码肯定在demo里面,想看的话自己找了.
