Почему сначала грузить всю страницу, а после только prelouder?

Дело в том, что обычно прелаудер нужен для того чтобы пока идет загрузка страницы, он работал, как только страница загрузилась исчезал. Но у меня же прелаудер ждет пока страница загрузится, а только потом начинает анимирование. Т.е. мы видим статическую картинку,а не gif, как можно решить?
Также , подскажите сервесы для сжимания gif, нашел, а он только 30проц режет :с

<script>
  $(window).on('load', function () {
    setTimeout(function () {
        var $preloader = $('#page-preloader'),
        $spinner   = $preloader.find('.spinner');
        $spinner.fadeOut();
        $preloader.delay(0).fadeOut('slow');
    }, 3000);
});
    </script>