Загрузка preloader для страницы до конца

Question

Я использую собственный предварительный загрузчик CSS, который загружается следующим фрагментом jQuery.

Проблема в том, что она загружается вместе с javascript, поэтому требуется некоторое время. Результат состоит в том, что в течение первых 2-3 секунд на моей странице ничего нет - нет содержимого и без предварительного загрузчика.

Я попытался перенести свой сценарий preloader в проект, чтобы загрузить его сначала, но это не очень помогает.

Как сделать так, чтобы нагрузка сразу и без запаздывания?

<!-- 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 - это html-код моего предварительного загрузчика css.

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>