如何将jQuery.Lazy()插件配置为仅在加载第一个元素后加载第二个元素

问题描述

我使用jQuery.Lazy()插件和ASP.NET Core Razor页面和Bootstrap 4应用程序通过AJAX从数据库中检索2个列表(见图)。一切都运行得很好，除了一件事：在移动设备上，我不知道如何延迟Content Data 2 List的检索/显示，直到用户在浏览器中向下滚动足够远的地方，以便Title 2/content在他们的视窗中。桌面上不存在这个问题(因为列表是并排显示的，并且两个列表都需要检索)，但在移动设备上，如果用户从未向下滚动足够远才能看到Content Data 2 List，我不想检索它。

当页面第一次加载时，两个标题都会与一个带有微调按钮的小数据区域一起显示。使用AJAX，我检索数据，隐藏微调控制项，然后在适当的位置显示检索到的数据。我的过度简化的超文本标记语言是： 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<div class="col-sm-12 col-lg-6 lazy" data-loader="lazyAJAX1">
    <div class="col">
        <label class="">Title 1</label>
    </div>

    <div class="col">
        <div class="">
            <div class="lp-spinner mt-4 mb-4">
            </div>
        </div>
        <div id="Content1List" class="col-12">
        </div>
    </div>
</div>

<div class="col-sm-12 col-lg-6 lazy" data-loader="lazyAJAX2">
    <div class="col">
        <label class="">Title 2</label>
    </div>

    <div class="col">
        <div class="">
            <div class="lp-spinner mt-4 mb-4">
            </div>
        </div>
        <div id="Content2List" class="col-12">
        </div>
    </div>
</div>

$(".lazy").Lazy({
    scrollDirection: 'vertical',
    effect: 'fadeIn',
    visibleOnly: true,
    bind: 'event',
    threshold: 0,
    lazyAJAX1: function () {
        loadAJAX1Partial();
    },
    lazyAJAX2: function () {
        loadAJAX2Partial();
    }
});

试了一段时间后，我认为问题出在数据加载器上。具体地说，data-loader="lazyAJAX2"，因为它最初在页面加载时显示在用户的视窗中，因此自动检索Content Data 2 List。我想要的是Lazy()首先检索Content Data 1 List(这将把Title 2内容向下推到用户的视窗之外)，然后为Content Data 2 List启用/激活Lazy()，这样当用户向下滚动到Title 2时，Content Data 2 List将被检索到。我希望这是有道理的。

我曾考虑使用addClass()来尝试解决此问题，但也许有更多.Lazy()经验的人对如何做到这一点有更好的想法。

提前感谢您的任何建议/帮助...：)

推荐答案

经过反复试验，我找到了解决困境的办法。根据@Eisbehr的建议，秘诀在于DOM刷新。

问题是：当通过loadAJAX1Partial()检索第一个Content Data 1 List时，Content Data 2 List也通过loadAJAX2Partial()被异步调用/检索。根据数据(从服务器返回的大小和时间)的不同，这两个列表中的任何一个都可以以任何顺序返回。使用@eisbehr建议的用法不能保证序列，也不能保证在异步/等待中包装调用(至少我不能不断地让它工作)。

那么答案是什么？使用setTimeout()或questAnimationFrame()并按照@eisbehr的建议对检索进行排序。

有一篇非常好的文章介绍了DOM以及它如何刷新浏览器中的内容(请参阅When DOM Updates Appear to Be Asynchronous)，但基本上您需要给浏览器时间来更新/刷新屏幕上的Content Data 1 List，这样Lazy才能发挥它的魔力。

因此，在我的第一个AJAX调用(loadAJAX1Partial())中，on Success：(在检索列表之后)，我只需调用：setTimeout(loadAssetList，500)来加载AssetList()，但给它500ms(1/2秒)以允许浏览器屏幕在初始化前刷新'Lazy'：

function loadAssetLists() {
    $(".lazy").Lazy({
        scrollDirection: 'vertical',
        effect: 'fadeIn',
        visibleOnly: true,
        bind: 'event',
        threshold: 0,
        lazyAJAX2: function () {
            loadAJAX2Partial();
        },
        lazyAJAX3: function () {
            loadAJAX3Partial();
        }
        // Chain additional AJAX calls here, if needed
    });
};

loadAJAX1Partial();