javascript - 当我使用其他方法时，jQuery 加载动画未隐藏在已加载页面上或显示延迟

Question

我正在使用 jQuery 来完成一个简单的任务。任务是简单地显示从无进度到页面完全加载的加载动画。

我遇到的事情是动画在 50-75% 的时间后出现，然后在页面完全加载后隐藏(我将其称为问题的下一部分的延迟)。

注意事项:

-> 如果我将动画代码放在 header.php 中，将 script 放在 footer.php 中，那么代码会显示 delay(Mentioned)。

-> 如果我将动画代码和 script 都放在 header.php 中，动画永远不会被隐藏(对我来说不明确)。对于 footer.php 中的两者，它被隐藏但显示延迟。

我想知道我的页面出现这种行为的原因，完成这项任务的最佳方法是什么。 (我知道我的方法不是最好的方法，因为它行为不端)

注意:我的主页包括 header.php 和 footer.php 文件。

我的问题到此结束。

这是引导加载动画。 (工作正常。没问题。只是为了展示)

动画代码

<div id="Loading">
    <div class="spinner-border m-5" role="status" >
      <span class="sr-only" >Loading...</span>
    </div>
</div>

这就是我用来隐藏页面上的动画完全加载的功能。 (也工作正常。没问题。只是为了展示)

脚本

<script>
    $(document).ready(function($) {
        $('#Loading').fadeOut("slow");
    });
</script>

Answer 1

document.ready() 意味着您的 DOM 已准备好运行，如果您的页面有大量内容并在底部添加 js 以加载 dom 它需要时间，因此加载动画会延迟。并在标题处确保 jquery 位于自定义 CSS 之上。如果您对答案不满意，请编辑问题并添加完整的 HTML 标记。