加载页面时显示加载程序

Display a loader when the page loads

本文关键字：加载 程序 显示      更新时间：2023-09-26

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

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

在页面开始加载后很长一段时间内显示加载程序，并且在页面加载之前fadeOut事件的持续时间为2000毫秒。

是否有任何方法可以在DOM准备好后立即执行加载程序的显示，并保持其可见，直到加载页面（而不是图像），然后隐藏加载程序？

为什么不直接将加载程序放在文档中，然后使用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>

它应该会有所帮助根据您的代码进行自定义

  $(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>
相关文章：