图片延迟加载

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())%>">