时间戳

首页 > 解决方案 > 加载主 div 后，如何运行淡出加载 div？

javascript - 加载主 div 后，如何运行淡出加载 div？

问题描述

我的代码中有两个主要的 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 完成后简单地淡出加载屏幕。

标签： javascripthtmljquery

解决方案

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

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

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

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

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

推荐阅读