@swks

Не работает прелоудер, что делать?

Подскажите пожалуйста что не так, использую это скрипт для прелоудера
<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>

суть вопроса в чем, прелоудер загружается идет анимация, но больше ничего не происходит, то бишь прелоудер зацикливается и после не показывает основной контент, как исправить?
  • Вопрос задан
  • 1003 просмотра
Решения вопроса 1
jsfiddle.net/gbag764n

Ваш код лишь с изменённым фоном. Работает. Исходя из этого можно сказать, что в скрипте есть ошибка, которая прерывает выполнение не дойдя до данной строки. Может быть не подключен jQuery, просмотр консоли, вероятно, сразу даст ответ. Ещё возможно, что вы объявляете $(window).on('load', function() { /* ... */ }) внутри такого же onload или же похожая ситуация, когда вы ставите обработчик на onload, который уже прошёл.

Ну и немного занудства: если стоит position: absolute/fixed или float: left/right, то display: block ставится автоматом. И код со спиннером можно переписать наглядней с callback'ом:

$spinner.fadeOut(350, function() {
  $preloader.fadeOut('slow');
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
teotlu
@teotlu
Навёрстываю упущенное
Скопипастил ваш код, у меня всё работает. Может, вы где-то не там подключили jQuery или написали свой скрипт?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы