“瀑布流式”图片懒加载代码示例

╰半夏微凉° 2022-08-18 11:52 251阅读 0赞

最近项目使用到了“懒加载”，现在更新一般，因为平时主要使移动端的开发所以库文件使用的是`zepto.js` 。当然也可以和`jQuery` 通用。

代码如下：

/** * Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * 图片的懒加载 **/
    function loadImgLazy(node) { 
        var lazyNode = $('[node-type=imglazy]', node),
            mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,
            imgDataSrc, localUrl;
    
        localUrl = location.href;
        // 获取当前浏览器可视区域的高度
        mobileHeight = $(window).height();
    
        return function(co) { 
    
            var conf = {
                'loadfirst': true,
                'loadimg': true
            };
    
            for (var item in conf) {
                if (item in co) {
                    conf[item] = co[item];
                }
            }
    
            var that = {};
            var _this = {};
            /** * [replaceImgSrc 动态替换节点中的src] * @param {[type]} tempObject [description] * @return {[type]} [description] */
            _this.replaceImgSrc = function(tempObject) { 
                var srcValue;
    
                $.each(tempObject, function(i, item) { 
                    imgObject = $(item).find('img[data-lazysrc]');
                    imgObject.each(function(i) { 
                        imgDataSrc = $(this).attr('data-lazysrc');
                        srcValue = $(this).attr('src');
                        if (srcValue == '#') {
                            if (imgDataSrc) {
                                $(this).attr('src', imgDataSrc);
                                $(this).removeAttr('data-lazysrc');
                            }
                        }
                    });
                });
            };
    
            /** * 首屏判断屏幕上是否出现imglazy节点，有的话就加载图片 * @param {[type]} i) { currentNodeTop [description] * @return {[type]} [description] */
            _this.loadFirstScreen = function() { 
                if (conf.loadfirst) {
                    lazyNode.each(function(i) { 
                        currentNodeTop = $(this).offset().top;
                        if (currentNodeTop < mobileHeight + 800) {
                            _this.replaceImgSrc($(this));
                        }
                    });
                }
            };
    
            //当加载过首屏以后按照队列加载图片
            _this.loadImg = function() { 
                if (conf.loadimg) {
                    $(window).on('scroll', function() { 
                        var imgLazyList = $('[node-type=imglazy]', node);
                        for (var i = 0; i < 5; i++) {
                            _this.replaceImgSrc(imgLazyList.eq(i));
                        }
                    });
                }
            };
    
            that = {
                replaceImgSrc: _this.replaceImgSrc(),
                mobileHeight: mobileHeight,
                objIsEmpty: function(obj) { 
                    for (var item in obj) {
                        return false;
                    }
                    return true;
                },
                destory: function() { 
                    if (_this) {
                        $.each(_this, function(i, item) { 
                            if (item && item.destory) {
                                item.destory();
                            }
                        });
                        _this = null;
                    }
                    $(window).off('scroll');
                }
            };
            return that;
        };
    }