页面预加载器加载延迟

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

延迟时间如此之长的原因是因为您正在等待整个站点的加载。这通常由图像占据，所以用$(document).ready替换$(window).load可能会使它更快。还要注意你的2500ms (2.5s)的延迟，减少它也会让它加载得更快。

<!-- 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>