javascript - 页面加载时显示加载器

Question

如何在页面加载时显示加载器并在加载时隐藏加载器？

$(document).ready(function() {
    $('.windowLoader').show().fadeOut(2000);
});

在页面开始加载很久之后显示加载程序，并且在页面加载之前完成 fadeOut 事件的 2000 毫秒持续时间。

有没有办法在 DOM 准备好后立即执行加载程序的显示并保持可见直到页面加载(不是图像)，然后隐藏加载程序？

Answer 1

为什么不将加载程序直接放在文档中，然后准备好使用 jQuery 将其删除？例如

<div id="loading"></div>

$(document).ready(function() {
    $("#loading").fadeOut(function() {
        $(this).remove(); // Optional if it's going to only be used once.
    });
});

否则，如果您在 $(document).ready() 中做其他事情，那么 .fadeIn() (/show/create) 您的加载栏在方法的顶部，执行大量代码，然后在底部调用 .fadeOut()

如果您担心没有 JavaScript 的人会查看加载栏，请添加以下内容:

<noscript>
    <style> #loading { display:none; } </style>
</noscript>