如何配置jQuery.Lazy()插件实现第一个元素加载完成后再加载第二个

解决方案 #

你遇到的问题核心是移动端单列布局下，第二个容器在初始化时确实处于视口内，Lazy插件会直接触发加载，等第一个列表渲染完成把第二个容器挤出视口时已经执行过加载逻辑了。这里提供两种符合jQuery.Lazy插件设计的实现方案：

方案1：标记位拦截（推荐，改动最小）

利用Lazy插件的beforeLoad回调做加载拦截，新增一个标记位控制第二个加载器的触发时机，同时适配桌面端逻辑：

1. 保留你原有的HTML结构不变
2. 修改JS逻辑如下：

// Bootstrap的lg断点为992px，桌面端直接允许两个加载器同时触发
let allowLoadAJAX2 = window.innerWidth >= 992;

$(".lazy").Lazy({
    scrollDirection: 'vertical',
    effect: 'fadeIn',
    visibleOnly: true,
    bind: 'event',
    threshold: 0,
    // 加载前拦截判断
    beforeLoad: function (element) {
        // 第二个加载器且未到允许时机，直接阻止加载
        if (element.data('loader') === 'lazyAJAX2' && !allowLoadAJAX2) {
            return false;
        }
    },
    lazyAJAX1: function () {
        loadAJAX1Partial();
    },
    lazyAJAX2: function () {
        loadAJAX2Partial();
    }
});

// 改造你的loadAJAX1Partial方法，在第一个列表渲染完成后放开第二个加载器的限制
function loadAJAX1Partial() {
    // 你原有的AJAX请求逻辑
    $.ajax({
        url: '你的第一个列表接口地址',
        // 其他请求配置
        success: function (responseData) {
            // 你原有渲染第一个列表的逻辑
            $('#Content1List').html(responseData);
            // 渲染完成后放开限制，刷新Lazy插件的元素检测
            allowLoadAJAX2 = true;
            $('.lazy').Lazy('update');
        }
    })
}

方案2：动态添加懒加载标识

初始时不给第二个容器加lazy类，等第一个列表渲染完成后再添加并初始化懒加载：

1. 修改HTML第二个容器结构：

<!-- 第一个容器保持不变 -->
<div class="col-sm-12 col-lg-6 lazy" data-loader="lazyAJAX1">
    <!-- 原有内容 -->
</div>
<!-- 第二个容器先去掉lazy类，加个id方便选中 -->
<div class="col-sm-12 col-lg-6" id="container2" data-loader="lazyAJAX2">
    <!-- 原有内容 -->
</div>

2. JS逻辑如下：

// 先初始化第一个容器的懒加载
$(".lazy").Lazy({
    scrollDirection: 'vertical',
    effect: 'fadeIn',
    visibleOnly: true,
    bind: 'event',
    threshold: 0,
    lazyAJAX1: function () {
        loadAJAX1Partial();
    }
});

// 桌面端直接初始化第二个容器的懒加载
if(window.innerWidth >= 992) {
    $('#container2').addClass('lazy');
    $(".lazy").Lazy({
        lazyAJAX2: function () {
            loadAJAX2Partial();
        }
    });
}

function loadAJAX1Partial() {
    $.ajax({
        url: '你的第一个列表接口地址',
        success: function (responseData) {
            $('#Content1List').html(responseData);
            // 移动端第一个列表加载完成后再初始化第二个容器的懒加载
            if(window.innerWidth < 992) {
                $('#container2').addClass('lazy');
                $(".lazy").Lazy({
                    scrollDirection: 'vertical',
                    effect: 'fadeIn',
                    visibleOnly: true,
                    bind: 'event',
                    threshold: 0,
                    lazyAJAX2: function () {
                        loadAJAX2Partial();
                    }
                });
                $('.lazy').Lazy('update');
            }
        }
    })
}

两种方案都可以实现你要的效果：桌面端两个列表同时加载，移动端等第一个列表渲染完成、第二个容器被挤出视口后才激活它的懒加载逻辑，只有用户滚动到对应位置时才会触发请求。

内容的提问来源于stack exchange，提问作者MicJarek