JS_ImageLazylode[说给自己听]

DEMO

1.准备工作；

<!--
　　[tran.gif] 为一个1px*1px的透明小图；
　　为了DEMO的小，简单；设置了[width="440" height="545"]方便我们找到每张图的[__mintop][__maxtop];
　　为了有loading的效果；一张loading的gif也是必不可少的[loading.gif];
　　[img{background:url(img/loading.gif) no-repeat center;}]
-->
<img src="img/tran.gif" loadsrc="http://pic002.cnblogs.com/images/2012/319713/2012103021492628.jpg" alt="" width="440" height="545" />

2.开始干活；

$.ui.lazyload = $.Class.creat();
$.ui.lazyload.prototype = {
    init:function(){
        this.opat = {
            id:document
            };
        $.Object.extend(this.opat,arguments[0]||{});
        this.fire();
    },
    fire:function(){
        var _this = this,_opat = _this.opat;
        var _id = $(_opat.id);
        var _imgs = _this._imgs = _id.find("img");　　
        var _time = null;
        _this.height = $.Window.innerHeight();
        _this.width = $.Window.innerWidth();
        _this.main();
　　　　 /*
   　　　 为了不用在每次触发滚动条时间的时候调用main()函数
 　　　　 */
        $(window).bind("scroll",function(){
            clearTimeout(_time);
            _time = setTimeout(function(){
                _this.main();
            },300);
        });
        
    },
    main:function(){
        var _this = this,_opat = _this.opat;
        var _imgs = _this._imgs;
        var _arr = [];
　　　　 /*
　　　　　　创建阀值，我这里只写了高度；
　　　　　　阀值的最小点是滚动条的高度；
　　　　　　阀值的最大点事滚动条加上窗口的高度；
　　　　　*/
        var _criticalMinTop = $.Window.scrollTop();
        var _criticalMaxTop = _criticalMinTop + _this.height;
        $.Each(_imgs.list,function(i,o){
　　　　　　　/*
　　　　　　　　创建每张图的相对点；
　　　　　　　　最小相对点是这张图相对于BODY的offsetTop;
　　　　　　　　最大相对点是这张图相对于BODY的offsetTop+本身的高度；
　　　　　　　 */
            var __mintop = $(this).offset().top;
            var __maxtop = __mintop+$(this).outerHeight();
　　　　　　　/*
　　　　　　　 判断的条件有三点：
　　　　　　　　1：图片的最小相对点大于阀值的最小点以及小于阀值的最大点；
　　　　　　　　2：图片的最大相对点大于阀值的最小点以及小于阀值的最大点；
　　　　　　　　3：图片的最小相对点小于阀值的最小点以及图片的最大相对点大于阀值的最大点；
　　　　　　　　这三种关系只要满足一点就可以触发：
　　　　　　　　　　1：这张图片的[src]换成[loadsrc];
　　　　　　　　　　2：记录这个这张图片的遍历值；
　　　　　　　 */
            if((__mintop >= _criticalMinTop && __mintop <= _criticalMaxTop) || (__maxtop >= _criticalMinTop && __maxtop <= _criticalMaxTop) || (__mintop <= _criticalMinTop && __maxtop >= _criticalMaxTop)){
                this.src = $(this).attr("loadsrc")
                _arr.push(i);
            }
        })
　　　　　/*
　　　　　　我们遍历刚才那个遍历值得数组；
　　　　　　然后把得[_imgs.list,这个是存放image的一个数组]删除刚才得到的遍历值，
　　　　　 */
        var _guid = 0;
        $.Each(_arr,function(){
            $.Use(_imgs.list).except(this - _guid);
            _guid++;
        });
        _arr = [];
    }
}

DEMO