“瀑布流式”图片懒加载代码解析及优化(二)

摘要：之前写过一版图片懒加载的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。这篇文章主要就是结合上篇瀑布流式图片懒加载代码示例再来看看图片懒加载的一些知识。

之前写过一版图片“懒加载”的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。
这篇文章主要就是结合上篇《“瀑布流式”图片懒加载代码示例》再来看看图片“懒加载”的一些知识。

图片“懒加载”的主旨：
按照需要加载图片，也就是说需要显示的时候再加载图片显示，减少一次性加载的网络带宽开销。

先来看一段代码：

    var conf = {
            "loadfirst": true,
            "loadimg": true
        };

        for (var item in conf) {
            if (item in co) {
                conf.item = co.item;
            }
        }

这里我主要是想实现，用户配置和默认配置的合并，这样写代码并不是很优雅，现在使用$.extend来做优化，代码如下：

_this.setting = {
            "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置
            "loadNum": 1 //滚动时，当前节点之后加载个数
        };

        $.extend(_this.setting, _this.getSetting());

这里重点介绍下，我新添加的两个参数mobileHeight,loadNum

mobileHeight 默认客户端的高度，值越大，首屏加载的图片越多;

loadNum 如果当前节点出现在屏幕上以后，可以一次性加载当前节点之后的若干个节点，可以跳高图片的加载速度;

之前我的代码是这样子写的：

_this.loadFirstScreen = function() {
            if (conf.loadfirst) {
                lazyNode.each(function(i) {
                    currentNodeTop = $(this).offset().top;
                    //这里的800就是上面提到的mobileHeight
                    if (currentNodeTop < mobileHeight + 800) {
                        _this.replaceImgSrc($(this));
                    }
                });
            }
        };
        
_this.loadImg = function() {
            if (conf.loadimg) {
                $(window).on("scroll", function() {
                    var imgLazyList = $("[node-type=imglazy]", node);
                    //这里的5就是上面提到的loadNum
                    for (var i = 0; i < 5; i++) {
                        _this.replaceImgSrc(imgLazyList.eq(i));
                    }
                });
            }
        };

按照可配置的想法来优化我现在的代码就是下面的这个样子的：

loadFirstSrceen: function() {
            // 加载首屏
            var _this = this;
            var currentNodeTop;
            var imgNodeList = _this.imgNode;
            $(imgNodeList).each(function() {
                currentNodeTop = $(this).offset().top;
                if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {
                    _this.replaceImgSrc($(this));
                }
            });
        },
        scrollLoadImg: function() {
            //滚动的时候加载图片
            var _this = this;
            var currentNodeTop;
            var scrollTop = $("body").scrollTop();
            var imgLazyList = $("[node-type=imglazy]");

            $(imgLazyList).each(function() {
                currentNodeTop = $(this).offset().top;
                if (currentNodeTop - scrollTop < _this.mobileHeight()) {
                    //加载当前节点后的规定个数节点
                    for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
                        _this.replaceImgSrc($(imgLazyList).eq(i));
                    }
                    return false;
                }
            });
        }

更重要的一个方面就是按照编写插件的思想来组织现在的代码结构。代码如下：

;(function($) {
    var LoadImgLazy = function(imgNode) {
        var _this = this;
        _this.imgNode = imgNode;

        _this.setting = {
            "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置
            "loadNum": 1 //滚动时，当前节点之后加载个数
        };

        $.extend(_this.setting, _this.getSetting());

        _this.loadFirstSrceen();
        $(window).on("scroll", function() {
            _this.scrollLoadImg();
        });


    };

    LoadImgLazy.prototype = {
        mobileHeight: function() {
            return $(window).height();
        },
        loadFirstSrceen: function() {
            // 加载首屏
            var _this = this;
            var currentNodeTop;
            var imgNodeList = _this.imgNode;
            $(imgNodeList).each(function() {
                currentNodeTop = $(this).offset().top;
                if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {
                    _this.replaceImgSrc($(this));
                }
            });
        },
        scrollLoadImg: function() {
            //滚动的时候加载图片
            var _this = this;
            var currentNodeTop;
            var scrollTop = $("body").scrollTop();
            var imgLazyList = $("[node-type=imglazy]");

            $(imgLazyList).each(function() {
                currentNodeTop = $(this).offset().top;
                if (currentNodeTop - scrollTop < _this.mobileHeight()) {
                    //加载当前节点后的规定个数节点
                    for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
                        _this.replaceImgSrc($(imgLazyList).eq(i));
                    }
                    return false;
                }
            });
        },
        replaceImgSrc: function(loadImgNode) {
            //动态替换图片
            var srcValue;
            var imgDataSrc;
            var _this = this;
            var imgUrlList = $(loadImgNode).find("img[data-lazysrc]");

            if (imgUrlList.length > 0) {
                imgUrlList.each(function(i) {
                    imgDataSrc = $(this).attr("data-lazysrc");
                    srcValue = $(this).attr("src");
                    if (srcValue === "#") {
                        if (imgDataSrc) {
                            $(this).attr("src", imgDataSrc);
                            $(this).removeAttr("data-lazysrc");
                        }
                    }
                });
                //移除已经运行过懒加载节点的node-type 对性能提升
                $(loadImgNode).removeAttr("node-type");
            }
        },
        getSetting: function() {
            var userSetting = $("[lazy-setting]").attr("lazy-setting");
            if (userSetting && userSetting !== "") {
                return $.parseJSON(userSetting);
            } else {
                return {};
            }
        },
        destory: function() {
            //销毁方法区
            $(window).off("scroll");
        }
    };

    LoadImgLazy.init = function(imgNode) {
        new this(imgNode);
    };

    window.LoadImgLazy = LoadImgLazy;

})(Zepto);

示例 Demo 地址，欢迎下载及反馈问题。