图片延迟加载

我与影子孤独终老i 提交于 2020-03-11 14:18:03

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

  

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!