页面加载时显示加载程序 [英] Display a loader when the page loads

问题描述

如何在页面加载时显示加载程序并在加载时隐藏它？

How do I display a loader when the page loads and hide it when it is loaded?

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

在页面开始加载后很长时间显示加载程序，有时在<$ c $的2000毫秒持续时间内显示加载程序c> fadeOut 事件在页面加载之前完成。

Displays the loader long after the page start loading and sometime the 2000 ms duration of the fadeOut event completed before the page has loaded.

在DOM准备好后，无论如何都要执行加载器的显示并且在页面加载（而不是图像）之前保持可见，然后隐藏加载程序？

Is there anyway to executed the display of the loader as soon as the DOM is ready and remain it visible until the page is loaded (not the images) and then hide the loader?

推荐答案

为什么不放入加载程序直接在文档中然后准备好使用jQuery删除它？ E.G。

Why not put the loader directly in the document and then on ready remove it using jQuery? E.G.

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

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

否则，如果你在 $（文件）中做其他事情.ready（）然后 .fadeIn（）（/ show / create）你方法顶部的加载栏，做你广泛的代码，然后在底部调用 .fadeOut（）

Else, if you're doing other things within your $(document).ready() then .fadeIn() (/show/create) your loading bar at the top of the method, do your extensive code, and then at the bottom call the .fadeOut()

如果您担心没有人，请提出建议JavaScript查看加载栏然后还添加以下内容：

As kindly suggested if you're worried about people without JavaScript viewing the loading bar then also add the following:

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

这篇关于页面加载时显示加载程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！