Jquery.DelayLoad.js - 延迟加载网页图片插件

功能为延迟加载网页上的图片，只有滚动条拉到该图片的位置，才会去发请求下载图片，可以让页面更快的加载。
特别适用于页面比较高，图片比较多，而且藏的比较深的页面，例如论坛，博客等。

网上有很多这类插件，但是功能都太过多余，这个脚本只有核心功能，优化了代码可以提高运行效率，在IE6.0+ FF5.0 CHROME OPERA safari 测试通过，欢迎2次开发！

使用方法很简单，目前就实现2个参数：

 $(".delayload").DelayLoad({
            oringal: 'oringal',                         //用来存放真实该图片地址，默认为oringal
            defaultimg : 'load.png'                //用来存放缺省图片的地址，默认为空
});

图片代码这么写，红色的代码是可以用户自定义的。

<img src=“” oringal=“evo.png” class=“delayload” />

之前由于疏忽有个小BUG，即图片在第一屏的时候不滚动SCROLL不会加载，现在新放了一个版本，修正了这个BUG，并且优化了部分代码，重新压缩过了！

靠竟然不能放附件！算了放代码吧：

1、先放google Closure Compiler压缩过的

直接保存为Jquery.delayload.js或是放在有jquery环境的js脚本中即可。

(function(a){a.fn.DelayLoad=function(g){function d(a,c){this.count=a;this.end=function(){if(this.count<1)return!0};this.oringal=c}var e={oringal:"oringal",defaultimg:""};a.extend(e,g||{});var c=this;d.prototype.initialize=function(b){a(this).attr("src",b)};d.prototype.show=function(b){if(a(window).height()+a(window).scrollTop()>=b.position_h)a(b).attr("src",a(b).attr(this.oringal)),b.loaded=!0,this.count--,c=a(a.grep(c,function(a){return!a.loaded}))};d.prototype.scrolling=function(){var b=this;c.each(function(){b.show(this)});
if(b.end())return a(window).unbind("scroll"),!1};var f=new d(c.length,e.oringal);c.each(function(){e.defaultimg!==""&&f.initialize.call(this,e.defaultimg);this.position_h=a(this).offset().top;f.show(this)});a(window).bind("scroll",function(){f.scrolling()})}})(jQuery);

2、再放developer版本，有详细注释:

/*
 * delayload- jQuery plugin for delay loading images
 *
 * Copyright (c) 2011-2011 Spout
 *
 * This is the min-version and reconstruction for jquery.lazy.load.js
 *
 * Jquery.delayload.js is object-oriented, it do faster than jquery.lazy.load.js
 *
 * Thanks Mika Tuupola!
 *
 * Version:  1.1.0
 *
 */
(function($) {
$.fn.DelayLoad = function(options) {
         var settings = {
                     oringal: 'oringal',                   //图片源的自定义属性
                     defaultimg : ''                        //缺省图片设置
                };
        $.extend(settings, options||{});
        var self = this;                                 //此处的this为jquery对象
        function DelayImg(length, oringal){
            this.count = length;                   //记录数，用来记录还有多少图片没有加载
            this.end = function(){                       //判断是否全部已经加载    
                    if(this.count<1){return true;}
                };
    this.oringal = oringal;   //用来记录用户自定义的源属性
            }
        DelayImg.prototype.initialize = function(i){
            $(this).attr('src', i)    //初始化设置图片SRC为缺省图片
        };
        DelayImg.prototype.show = function(thisimg){
    var now_h =  $(window).height() + $(window).scrollTop();        //获得当前高度,每次得重复计算
    if(now_h>=thisimg.position_h ){                                //判断是否已经到达当前高度
                  $(thisimg).attr('src',$(thisimg).attr(this.oringal));  //显示图片，要加一些特效可以加在这里
                            thisimg.loaded = true;
       this.count--;                                        //计数器减1
                            self = $($.grep(self, function(n, i){                //将已经加载的图片踢出self数组
                                    return !n.loaded;
                                }));                                       
                    } 
        };
        DelayImg.prototype.scrolling  = function(){        //当scrolling时触发这个方法
            var that = this;
                self.each(function(){
                    that.show(this)
                });
   if(that.end()){                                                //如果计数器为0的时候触发，接触scroll的绑定
                    $(window).unbind('scroll');
                    return false;
                 }
            };
        var delay_img = new DelayImg(self.length, settings.oringal);    //实例化
        self.each(function(){    //初始化
        if(settings.defaultimg !== ''){                  //如果缺省小图片不存在的话
            delay_img.initialize.call(this, settings.defaultimg);
        }
            this.position_h = $(this).offset().top;   //用来存放这个element相对于整个窗口的高度，方便以后读取
   delay_img.show(this);    //将第一屏的图片显示出来
        })
        $(window).bind('scroll', function(){delay_img.scrolling();})
}
})(jQuery);