延时加载图片(优化版)

在上一篇文章（http://www.cnblogs.com/windinsky/archive/2010/07/09/1774354.html）中，探讨了一下页面图片延时加载的方法，今天重新看了一遍代码，发现其实不必写的那么麻烦，也用不到数组，做了一下修改，精简了一些无用的代码。

延时加载原理：

1、将需要延时加载的图片的src属性去除，新添一个自定义的属性如lazyload，将图片路径存于lazyload属性中。如下

<img lazyload="img/bmw_m1_hood.jpg?1277878639" />

2、Js预加载第一张图片，将lazyload的值赋予img的src属性，并移除lazyload属性。如下

<img src="img/bmw_m1_hood.jpg?1277878639" />

3、为window对象添加scroll（页面滚动）事件，每次触发事件时，计算目前页面中第一张需要延时加载图片的位置是否在可视区域，若在可视区域，将lazyload的值赋予img的src属性，并移除lazyload属性。

以下是经过优化的代码

// /<reference path="jquery-1.4.1-vsdoc.js" />
var  lazyLoad  =  {
     // / <summary>
     // / img标签中的存放图片路径的自定义属性名称
     // / </summary>
    AttributeName:  " lazyload " ,
     // / <summary>
     // / 初始化。自动加载第一张图片。
     // / </summary>
    Init:  function  (v) {
         if  (v  !=  undefined  &&  v  !=   null   &&   typeof  (v)  ==   " string " ) {
             this .AttributeName  =  v;
        }

         if  ($( " img[ "   +   this .AttributeName  +   " ] " ).size()  >   0 ) {
             var  src  =  $( " img[ "   +   this .AttributeName  +   " ] " ).eq( 0 ).attr( this .AttributeName);
            $( " img[ "   +   this .AttributeName  +   " ] " ).eq( 0 ).attr( " src " , src);
            $( " img[ "   +   this .AttributeName  +   " ] " ).eq( 0 ).removeAttr( this .AttributeName);
        }
    },
     // / <summary>
     // / 当scroll事件被触发时，进行加载图片的操作
     // / </summary>
    LoadImage:  function  (scrolltop) {
         // 获取目前第一张需延迟加载的图片，无图片的话就终止
         var  currentObj  =   null ;
         if  ($( " img[ "   +   this .AttributeName  +   " ] " ).size()  >   0 ) {
            currentObj  =  $( " img[ "   +   this .AttributeName  +   " ] " ).eq( 0 );
        }
         else  {
             return   false ;
        }

         // 获取窗体的高度
         var  windowHeight  =  $(window).height();
         // 获取当前图片相对于页面顶部的偏移量
         var  _scrollTop  =  currentObj.offset().top  -  windowHeight  +  currentObj.height();
         // 根据scrollTop判断是否显示图片
         if  (parseInt(scrolltop)  >=  parseInt(_scrollTop)) {
             var  src  =  currentObj.attr( this .AttributeName);
            currentObj.attr( " src " , src);
            currentObj.removeAttr( this .AttributeName);
        }
    },
     // / <summary>
     // / 启动延时加载
     // / <params key="v">img标签中的存放图片路径的自定义属性名称</params>
     // / </summary>
    Run:  function  (v) {
         this .Init(v);

         var  _this  =   this ;
         if  ($( " img[ "   +   this .AttributeName  +   " ] " ).size()  >   0 ) {
            $(window).bind( " scroll " ,  function  () {
                _this.LoadImage($( this ).scrollTop());
            });
        }
    }
};

有兴趣的朋友按上篇文章的方法用firebug测测，效果依旧！