下拉时图片载入

 

var lazyLoad = {
    /// <summary>
    /// img标签中的存放图片路径的自定义属性名称
    /// </summary>
    AttributeName: "path",
    /// <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);
        //        }
    },
    addLoading: function (img) {
        var loadimg = $("<img src='http://static.sozhekou.com/img/common/loading.gif'/>");
        var offset = img.offset();
        var t = Body.scrollTop();
        var l = $.browser.mozilla ? 0 : img.width() / 2;
        loadimg.css({
            position: "absolute",
            top: offset.top + t + img.height() / 2 - 8,
            left: offset.left + l - 8
        });
        img.data("loadImg", loadimg);
        img.data("title", img.attr("title"));
        Body.append(loadimg);
        img.attr("title", "图片加载中...");
    },
    removeLoading: function (img) {
        img.data("loadImg").remove();
        img.attr("title", img.data("title"));
        img.removeData("loadImg");
        img.removeData("title");
    },
    /// <summary>
    /// 当scroll事件被触发时，进行加载图片的操作
    /// </summary>
    LoadImage: function (scrolltop) {
        //获取目前第一张需延迟加载的图片，无图片的话就终止
        var that = this;
        if ($("img[" + this.AttributeName + "]").size() > 0) {
            //获取窗体的高度
            var windowHeight = $(window).height();
            $("img[" + this.AttributeName + "]").each(function () {
                var currentObj = $(this);
                //获取当前图片相对于页面顶部的偏移量
                var _scrollTop = currentObj.offset().top - windowHeight - 300; // +currentObj.height();
                //根据scrollTop判断是否显示图片

                if (parseInt(scrolltop) >= parseInt(_scrollTop)) {
                    var src = currentObj.attr(that.AttributeName);
                    if (src.indexOf("http://") == -1) {
                        src = "http://" + src;
                    }
                    //that.addLoading(currentObj);
                    //alert(currentObj.offset().top);
                    currentObj.load(function () {
                        //that.removeLoading(currentObj);
                        currentObj.animate({ opacity: 1 }, 500);
                    }).attr("src", src);
                    currentObj.removeAttr(that.AttributeName);
                }
            });
        }
        else {
            return false;
        }
    },
    /// <summary>
    /// 启动延时加载
    /// <params key="v">img标签中的存放图片路径的自定义属性名称</params>
    /// </summary>
    Run: function (v) {
        this.Init(v);
        var _this = this;
        var time;
        var imgs = $("img[" + this.AttributeName + "]");
        var box = $("div.bd_wraper:first");
        if (imgs.size() > 0) {
            imgs.css("opacity", 0);
            box.bind("scroll", function () {
                time && clearTimeout(time);
                var that = this;
                time = setTimeout(function () {
                    _this.LoadImage($(this).scrollTop());
                }, 20);
            });
        }
        _this.LoadImage(box.scrollTop());
    }
};