Почему не скрывается прелоадер на мобильном?

Question

[Михаил Мишутка]

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

<!-- Лоадер -->
<div class="loader">
	<div class="cssload-loader">
		<div class="cssload-inner cssload-one"></div>
		<div class="cssload-inner cssload-two"></div>
		<div class="cssload-inner cssload-three"></div>
	</div>
</div>
<!-- Конец лоадера -->

// Лоадер
.loader
	background-color: #111
	position: fixed
	top: 0
	left: 0
	right: 0
	bottom: 0
	z-index: 102
	.cssload-loader
		position: fixed
		top: calc(50% - 32px)
		left: calc(50% - 32px)
		width: 64px
		height: 64px
		border-radius: 50%
		perspective: 800px
		.cssload-inner
			position: absolute
			width: 100%
			height: 100%
			box-sizing: border-box
			border-radius: 50%
		.cssload-one
			left: 0
			top: 0
			animation: cssload-rotate-one 1.3s linear infinite
			border-bottom: 3px solid rgba(249,201,105,.95)
		.cssload-two
			right: 0
			top: 0
			-webkit-animation: cssload-rotate-two 1.3s linear infinite
			animation: cssload-rotate-two 1.3s linear infinite
			border-right: 3px solid #f9c969
		.cssload-three
			right: 0
			bottom: 0
			animation: cssload-rotate-three 1.3s linear infinite
			border-top: 3px solid #f9c969
@keyframes cssload-rotate-one
	0%
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
	100%
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
@keyframes cssload-rotate-two
	0%
		transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
	100%
		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
@keyframes cssload-rotate-three
	0%
		transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
	100%
		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
// Конец прелоадера

$(window).on('load', function() {
		$('.loader').delay(500).fadeOut('slow');
	});

Answer 1

[Максим Тимофеев]

первое что надо проверить, это - а работает ли $(window).on('load'
Как простой вариант:

$(window).on('load', function () {
      alert("Window Loaded");
 });

Второе, это проверить, а находит ли селектор $('.loader').
И в зависимости от этого уже плясать дальше. Надеюсь консоль на предмет ошибок Вы проверили до написания вопроса.

Comments

[Михаил Мишутка]

Проверил, предупреждение всплывает.

[Максим Тимофеев]

Михаил, дальше -

$(window).on('load', function() {
    alert($('.loader').length);
  });

Что дает?

[Михаил Мишутка]

Консоль проверял. Данная проблема происходит только на мобильных телефона в браузере. На компьютере все отлично, прелоадер скрывается, так же ставил разрешение экрана мобильных телефонов, на ПК все отлично. Но именно при открытии с мобильного, прелоадер постоянно включен.

[Максим Тимофеев]

Михаил, на мобильном консоль пустая?

[Михаил Мишутка]

Максим Тимофеев, Всплывает окно с цифрой 1, селектор находит.

[Максим Тимофеев]

Максим Тимофеев, а если

$(window).on('load', function() {
    $('.loader').delay().fadeOut();
  });

или так

$(window).on('load', function() {
    $('.loader').hide();
  });

[Pavel Karinin]

Михаил, а вы попробуйте (пока ради эксперимента) на document повесить load и выполните те же проверки

[Максим Тимофеев]

Pavel Karinin, а смысл? У него же селектор есть, ивент срабатывает.

[Pavel Karinin]

Максим Тимофеев, у меня пару лет назад была такая же ерунда, до сих пор сам не понимаю смысл, но стало работать...

[Михаил Мишутка]

Максим Тимофеев, Все тоже самое, с мобильного постоянный прелоадер
Pavel Karinin, Так даже на ПК не работает, просто крутится прелоадер

[Pavel Karinin]

Михаил, попробуйте создать СSS-класс, который останавливает анимацию и срывает предзагрузчик, а в функции load после задержки добавить этот класс. Просто это может быть связано с тем что JQ анимация не всегда дружит с @keyframes

[Михаил Мишутка]

Pavel Karinin, Спасибо буду пробовать

[Pavel Karinin]

Михаил, отпишите по результатм

[Михаил Мишутка]

Pavel Karinin, Сначала попробую додуматься как эту функцию правильно написать) только изучаю JS и по этому есть трудности)

[Pavel Karinin]

Михаил, это не в JS. это вам в CSS следует объявить класс, например с таким имением .loader-hide, и в нем переопределить все стили отвечающие за анимацию, хотя это громко сказано, т.е. просто остановить анимацию и скрыть loader, а в JS уже использовать его так:

$(window).on('load', function() {
    $('.loader').delay(500).addClass('loader-hide');
});