犀利的lazyLoad,求js高手鉴定

   最一段代码,是一段原生的图片加载器,可以实现如下功能,就目前自认为最牛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里面,想看的话自己找了.