Подскажите пожалуйста что не так, использую это скрипт для прелоудера
<script>
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.spinner');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});
</script>
css разметка и html код
<!DOCTYPE HTML>
<html>
<head>
<title>олололо</title>
</head>
<body>
<style>
#page-preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 100500;
}
#page-preloader .spinner {
width: 32px;
height: 32px;
position: fixed;
left: 50%;
top: 50%;
background: url('web/images/preloader.gif') no-repeat;
background-size: contain;
margin: -16px 0 0 -16px;
display: block;
}
</style>
<div id="page-preloader"><span class="spinner"></span></div>
<div>content</div>
</body>
</html>
суть вопроса в чем, прелоудер загружается идет анимация, но больше ничего не происходит, то бишь прелоудер зацикливается и после не показывает основной контент, как исправить?