图片延迟加载

1，图片加载JS

 

var LazyLoad = function (options) {
    this.SetOptions(options);
    this.container = $(this.options.container);
    this.childs = $(this.options.container).find("[lazyload-src]");
    this.data = [];
    this.oldScroll = this.options.oldScroll;
    this.newScroll = this.options.newScroll;
    this.ImgWidth = this.options.ImgWidth;
    this.ImgHeight = this.options.ImgHeight;
    this.isZoom = this.options.isZoom;
    this.Initialize();
    this.ScrollLoad();
    this.ResizeLoad();
};
LazyLoad.prototype = {
    SetOptions: function (options) {  //初始化数据
        this.options = {
            container: null,  //父容器，要保证延迟加载的图片在该容器之内
            childs: null, //需要延迟加载的图片数组
            oldScroll: 0, //记录滚动条上次位置
            newScroll: 0, //滚动条当前位置
            isZoom: false, //是否启用缩放
            ImgWidth: 60, //要缩放图片的宽度
            ImgHeight: 60 //高度
        };
        $.extend(this.options, options || {}); //合并options
    },
    Initialize: function () { //初始化
        if (this.isZoom) {
            this.CreateImage()
        }
        this.Mheight = this.container.height() + this.container.offset().top; //记录父容器的最底端位置
        for (var i = 0; i < this.childs.length; i++) {
            this.data.push($(this.childs[i]).offset().top);
        }
        this.RunLoad()
    },
    CreateImage: function () { //获取需要延迟加载所有的真实URL保存到数组中
        this.image = [], this.image_src = [];
        for (var i = 0; i < this.childs.length; i++) {
            this.image_src.push($(this.childs[i]).attr("lazyload-src"));
            this.image.push(new Image());
        }
    },
    LoadImage: function (i) { //加载图片
        var _this = this;
        (function () {
            var index = i;
            $(_this.image[index]).load(function () {
                if (_this.image[index].width == 0 || _this.image[index].height == 0) return;
                _this.AutoScaling(_this.image[index], index);
                _this.image[index] = new Image()
            });
            _this.image[index].src = _this.image_src[index]
        })()
    },
    AutoScaling: function (source, index) { //等比例缩放图片
        var childsImg = this.childs;
        if (source.width > 0 && source.height > 0) {
            if (source.width / source.height >= this.ImgWidth / this.ImgHeight) {
                if (source.width > this.ImgWidth) {
                    $(childsImg[index]).width(this.ImgWidth);
                    $(childsImg[index]).height((source.height * this.ImgWidth) / source.width)
                } else {
                    $(childsImg[index]).width(source.width);
                    $(childsImg[index]).height(source.height)
                }
            } else {
                if (source.height > this.ImgHeight) {
                    $(childsImg[index]).height(this.ImgHeight);
                    $(childsImg[index]).width((source.width * this.ImgHeight) / source.height)
                } else {
                    $(childsImg[index]).width(source.width);
                    $(childsImg[index]).height(source.height);
                }
            }
        }
        source = new Image();
    },
    Before: function () { //获取当前可视范围的对底部位置
        var _Cheight;
        _Cheight = $(window).height() + $(window).scrollTop();
        return _Cheight;
    },
    Compare: function (iHeight) { //根据当前图片的高度判定是否在可视范围内来决定是否需要加载图片
        var Cheight;
        Cheight = this.Before();
        return Cheight - iHeight;
    },
    RunLoad: function () { //延迟加载图片并缩放
        var compareValue, _this = this;
        this.oldScroll = $(window).scrollTop();
        for (var i = 0; i < this.data.length; i++) {
            compareValue = this.Compare(this.data[i]);
            if (compareValue > -0 && !!$(this.childs[i]).attr("lazyload-src")) {
                $(this.childs[i]).removeAttr("lazyload-src");
                $(this.childs[i]).attr("src", _this.image_src[i]);
                if (this.isZoom)
                    this.LoadImage(i);
                $(this.childs[i]).hide().fadeIn(300);
            }
        }
    },
    ScrollLoad: function () {  //绑定滚动条事件
        var _this = this;
        $(window).bind("scroll." + _this.options.container, function () {
            _this.newScroll = $(window).scrollTop();
            _this.StopLoad();
            if (_this.newScroll - _this.oldScroll < 0) { return; }
            _this.RunLoad();
        })
    },
    ResizeLoad: function () { //绑定调整窗体大小时事件
        var _this = this; $(window).bind("resize." + _this.options.container, function () { _this.RunLoad(); });
    },
    StopLoad: function () { // 当前位置已经完整显示出父容器最底部则解除事件
        var Cheight;
        Cheight = this.Before();
        if (Cheight > this.Mheight) {
            $(window).unbind("scroll." + this.options.container);
            $(window).unbind("resize." + this.options.container);
        }
    } 
};

　　

2，代码显示

 

<img style="width: 100px; height: 100px;" src="/img/o_loading.jpg" lazyload-src="<%#Eval("bsSPicUrl").ToString().Replace("_sy", "_sm")%>" border="0" onerror="this.onerror=null;this.src='/img/err.jpg'"  alt="<%#TZB2B.Web.comHelp.GetTitleStr(Eval("bsTitle").ToString())%>">