图片延迟加载jQuery实现源码

方案一

定义js文件，内容如下

/**
 * 图片延迟加载
 */
var lazyLoad = {
 /**
  * 初始化函数，获得当前页面中含有lazyload属性的img标签
  */
    Init: function () {
        return $("img[lazyload]");
    },
    /**
     * 计算函数，计算img到浏览器顶部的距离，如果距离一样就放到同一个数组中
     */
    Calculate: function (lazyloadobject) {
     /**
      * 获得浏览器中可见区域的高度
      */
        var windowHeight = $(window.parent).height();
        var arrReturn = {};
        var _scrollTop;
        if (lazyloadobject.length == 0) {
            return null;
        }
        else {
         /**
          * 依次循环当前页面中所有的img对象
          */
            lazyloadobject.each(function (i) {
             /**
              * 计算img到浏览器顶部的距离
              */
                _scrollTop = parseInt($(this).offset().top) + $(window.parent.document).find("iframe[id=zhy_iframe]").offset().top;
                if (!arrReturn.hasOwnProperty(_scrollTop)) {
                    arrReturn[_scrollTop] = new Array();
                }
                /**
                 * 距离一样就放到同一个数组中
                 */
                arrReturn[_scrollTop].push($(this));
            });

            /**
             * 获得图片的高度
             */
         this.ImgHeight = $(lazyloadobject[0]).attr("height");
         /**
          * 处理好以后的img对象数组
          */
            this.ArrLoad = arrReturn;
            return arrReturn;
        }
    },
    ArrLoad: null,
    /**
     * 图片高度
     */
    ImgHeight: null,
    /**
     * 进行图片的加载
     */
    IsLoad: function (scrolltop, objectstop) {
     /**
      * 浏览器可见区域底部的高度
      */
     var maxScrollTop = parseInt(scrolltop + $(window.parent).height());
     
        if (objectstop != null && objectstop != {}) {
            for (i in this.ArrLoad) {
             /**
              * 如果图片在可见区域类，就进行图片的加载，否则就不进行加载
              */
                if (parseInt(i) + this.ImgHeight >= scrolltop && parseInt(i) <= maxScrollTop && this.ArrLoad.hasOwnProperty(i)) {
                    for (j = 0; j < this.ArrLoad[i].length; j++) {
                        this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
                    }
                    delete this.ArrLoad[i];
                }
            }
        }
    },
    /**
     * 执行函数，调用相关的函数进行图片延迟加载的处理
     */
    Run: function () {
        var lazyLoadObject = this.Init();
        this.Calculate(lazyLoadObject);
        arrScrollTop = this.ArrLoad;
        if (arrScrollTop == null) {
            return false;
        }
        else {
            var _this = this;
            _this.IsLoad($(window.parent).scrollTop(), arrScrollTop);
            /**
             * 触发浏览器滚动条滚动事件
             */
            $(window.parent.document).scroll(function () {
                _this.IsLoad($(this).scrollTop(), arrScrollTop);
            });
        }
    }
}

$(function() {
 setTimeout(function() {
  lazyLoad.Run();
 }, 1000);  
});

引用Demo：

1.导入js

2.<img src="imgs/default.jpg" lazyload="<s:property value="#appinfo.icoUri"/>">

 

方案二

定义js文件（jquery.scrolloading.js），内容如下

// JavaScript Document
/*
 * jquery.scrolloading.js
 * by yvesyu
 * 2011-11-04 v1.0
*/
(function($) {
 $.fn.scrolloading = function(options){
  var defaults = {
   attr: "data-url"
  };
  var params = $.extend({}, defaults, options || {});
  params.cache = [];
  $(this).each(function(){
   var node = this.nodeName.toLowerCase(), arg = $(this).attr(params["attr"]);
   if (!arg) { return; }
   //节点数据元
   var data = {
    obj: $(this),
    tag: node,
    arg: arg
   };
   params.cache.push(data);
  });
  
  //动态加载数据
  var loading = function(){
   var st = $(window).scrollTop();
   var sth = st + $(window).height();
   $.each(params.cache, function(i, data){
    var o = data.obj;
    if(o){
     var post = 0, posb = 0;
     try{
      post = o.offset().top;
      posb = post + o.height();
     }catch(ex){}
     if((post > st && post < sth) || (posb > st && posb < sth)){
      var tag = data.tag, arg = data.arg;
      //在浏览器可见区域内
      if(tag === "img"){
       if(!o.attr("src")){
        o.attr("src", $.trim(arg));
       }
      }else{
       //o.load(arg);
       eval(arg + "()");
      }
      data.obj = null;
     }
    }
   });
   return false;
  };
  
  //加载完毕即执行
  loading();
  //滚动执行
  $(window).bind("scroll", loading);
 };
})(jQuery);