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

喜欢ヅ旅行 2022-08-20 09:27 262阅读 0赞

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

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

先来看一段代码：

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 地址，欢迎**[下载][Link 2]**及反馈问题。

[![这里写图片描述][20160222200424811]][Link 2]

[Link 1]: http://blog.csdn.net/yisuowushinian/article/details/50325291
[Link 2]: https://github.com/zhiqiang21/WebComponent/tree/master/lazy-load-img
[20160222200424811]: https://img-blog.csdn.net/20160222200424811