javascript - 页面预加载器加载较晚

Question

我使用自定义 CSS 预加载器，它是通过以下 jQuery 代码片段加载的。

问题是它与 javascript 一起加载，所以需要一段时间。结果是，在最初的 2-3 秒内，我的页面上没有任何内容 - 没有内容，也没有预加载器。

我尝试将预加载器脚本移到元素中以首先加载它，但这没有多大帮助。

如何让它立即加载且没有延迟？

<!-- Preloader -->
    <script type="text/javascript">
        //<![CDATA[
        $(window).load(function () { // makes sure the whole site is loaded
                $('#status').load("preloader/preloader.html"); // will first fade out the loading animation
                $('#preloader').delay(2500).fadeOut('slow'); // will fade out the white DIV that covers the website.
                $('body').delay(2500).css({
                    'overflow': 'visible'
                });
            })
            //]]>
    </script>

preloader.html是我的css预加载器的html代码。

Answer 1

您的延迟时间如此之长的原因是您正在等待整个网站加载。这通常由图像占用，因此将 $(window).load 替换为 $(document).ready 可能会使其速度更快。另请注意 2500 毫秒(2.5 秒)的延迟，减少延迟也会使其加载速度更快。

<!-- Preloader -->
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() { // makes sure the whole site is loaded
        $('#status').load("preloader/preloader.html", function() {
            //run after ajax get request completes (preloader.html is loaded)
            //now we remove the delays since we have explicity waited for the preloader to load
            $('#preloader').fadeOut('slow'); // will fade out the white DIV that covers the website.
            $('body').css({
                'overflow': 'visible'
            });
        });
    });
    //]]>
</script>