加载主 div 后，如何运行淡出加载 div？答案

【问题标题】：How can I run fade my loading div out after the main div has loaded?加载主 div 后，如何运行淡出加载 div？
【发布时间】：2020-06-02 23:21:23
【问题描述】：

我的代码中有两个主要的 div 标签：一个是主显示屏（id = 'test'），另一个是加载屏幕（id = 'loading'），它在主显示屏运行时覆盖整个屏幕获取。主显示器的 div 代码都是通过 javascript 函数完成的。到目前为止，这就是我所拥有的：

<body>
       <div class="container" id="test"></div>

       <div class="loader-wrapper" id="loading">
            <span class="loader"><span class="loader-inner"></span></span>
        </div>


    <script>
        $(window).on('load', function(){
          $('#loading').fadeOut();
        });
    </script>
</body>

作为参考，“测试”由我创建的一个 js 类处理，该类从 localhost 获取数据，其中包含要显示的某些数据。数据以字典的形式返回。根据这本字典的长度，我的代码循环了很多次，并以用户友好的格式创建了 test 的 innerHTML。如果数据为空，则使用 else 语句来显示不同的 innerHTML 以供测试。 js函数的代码如下：

const renderTest = async function(){
    var row_string = "";
    var response = await fetch(`http://localhost:3000/getData`);
    const data = await response.json();
    //create the innerHTML of test
}
renderTest();

我无法解决的问题是我制作的 jquery 函数在“测试”div 加载完成之前完成。我尝试用“#test”替换窗口，但发现加载屏幕始终存在。解决这个问题的最佳方法是什么？我希望有一种方法可以在 renderTest 完成后简单地淡出加载屏幕。

【问题讨论】：

听起来你应该将一个事件绑定到任何将内容添加到 div 的东西......所以它是一个 Ajax 调用吗？
很遗憾，我没有使用过 Ajax。
//create the innerHTML of test
对不起......我不敢相信我没有想到这一点。我所要做的就是将以下内容放在代码的最后： $('#loading').fadeOut();谢谢你的帮助大声笑

标签： javascript html jquery

【解决方案1】：

正如@epascarello 所说，您应该从加载/获取 div 内容的函数中隐藏加载器

如果你使用 Promises，它应该是这样的

fetchData()
.then(ok => $('#loading').fadeOut(), er => alert("something went wrong: "+er)

如果您不使用 Promise，请添加加载数据的函数，以便我们提供帮助。

顺便说一句，现在在使用加载器时使用 Promises 是一种很好的做法

【讨论】：