可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

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

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.

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?

回答1:

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.
    });
});

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()

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>

回答2:

it should help customize it according to your code

  $(document).ready(function () {
            // calculate height
            var screen_ht = jQuery(window).height();
            var preloader_ht = 5;
            var padding = (screen_ht / 5) - preloader_ht;
            jQuery("#preloader").css("padding-top", padding + "px");


            // loading animation using script 

            function anim() {
                jQuery("#preloader_image").animate({ left: '1px' }, 2000,
                function () {
                    jQuery("#preloader_image"), animate({ left: '1px' }, 2000);
                }
                );
            }
            //anim();
        });
    function hide_preloader() {
    // To apply Fade Out Effect to the Preloader 
    jQuery("#preloader").fadeOut(1000);
    }
    </script>
<style>
    #preloader {background: #1c1c1c;position:fixed;left:0px; top:0px; width:100%; height:100%; text-align:center;color:#fff;z-index: 100000000;}
    #preloader div {width:228px;height:240px;margin:auto;padding:10px 0;text-align:center;overflow:hidden;}
    #preloader_image {width:228px;height:240px;position: relative;left:0px;top:-10px;}
</style>
</head>

<body id="home" onload="hide_preloader()">
    <div id="preloader">
        <div>
            <div id="preloader_image">
                <img src="loading.gif" style="position: absolute;bottom: 0;left: 35%;">
            </div>
        </div>
    </div>
    </body>