頁面預加載程序加載到後期

Question

我使用通過以下jQuery代碼段加載的自定義CSS預加載程序。

問題是，它加載在一起的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 preloader的html代碼。

Answer 1

你的滯後需要這麼長時間的原因是因爲你正在等待整個網站被加載。這通常由圖像佔用，因此用$(document).ready代替$(window).load可能會使其更快。另外請注意，您的延遲時間爲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>