页面预加载器加载到最晚

时间:2015-12-06 21:03:52

标签: javascript jquery html css preloader

我使用自定义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代码。

1 个答案:

答案 0 :(得分:0)

你的滞后需要这么长时间的原因是因为你正在等待加载整个网站。这通常由图片占用,因此将$(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>