「瀑布流式」圖片懶加載代碼解析及優化(二)

以前寫過一版圖片「懶加載」的文章，恰好週末在整理文件的時候，大概又看了一遍以前寫的代碼發現有不少能夠優化的地方。
這篇文章主要就是結合上篇《「瀑布流式」圖片懶加載代碼示例》再來看看圖片「懶加載」的一些知識。

圖片「懶加載」的主旨：
按照須要加載圖片，也就是說須要顯示的時候再加載圖片顯示，減小一次性加載的網絡帶寬開銷。

先來看一段代碼：

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 地址，歡迎 下載 及反饋問題。