随笔- 75 文章- 5 评论- 6 阅读- 57461

图片延迟加载

1，图片加载JS

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

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，代码显示

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