Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2020, 22:47
Интересующийся
Отправить личное сообщение для mikhail apalaev Посмотреть профиль Найти все сообщения от mikhail apalaev
 
Регистрация: 15.10.2015
Сообщений: 13

Прелоадер не выполняет свою задачу!
Прелоадер срабатывает не сразу, перед ним успевает прогрузиться часть содержимого страницы.

Начало html файла:

<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title></title>

Js библиотеки для прелоадера:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/plugins/CSSRulePlugin.min.js"></script>


<script type='text/javascript' src='script.js'></script> -здесь скрипт прелоадера


сам скрипт прелоадера:

$(window).on('load', function(e) {

e.preventDefault();
transition();
});

function transition() {
var tl = new TimelineMax();

tl.to(CSSRulePlugin.getRule('body:before'), 0.2, {cssRule: {top: '50%' }, ease: Power2.easeOut}, 'close')
.to(CSSRulePlugin.getRule('body:after'), 0.2, {cssRule: {bottom: '50%' }, ease: Power2.easeOut}, 'close')
.to($('.loader'), 0.2, {opacity: 1})
.to(CSSRulePlugin.getRule('body:before'), 0.2, {cssRule: {top: '0%' }, ease: Power2.easeOut}, '+=1.5', 'open')
.to(CSSRulePlugin.getRule('body:after'), 0.2, {cssRule: {bottom: '0%' }, ease: Power2.easeOut}, '-=0.2', 'open')
.to($('.loader'), 0.2, {opacity: 0}, '-=0.2');
}
Ответить с цитированием
  #2 (permalink)  
Старый 10.01.2020, 23:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,539

Сообщение от mikhail apalaev
сам скрипт прелоадера:

$(window).on('load', function(e) {

e.preventDefault();
transition();
});
попробуйте так
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2020, 00:23
Интересующийся
Отправить личное сообщение для mikhail apalaev Посмотреть профиль Найти все сообщения от mikhail apalaev
 
Регистрация: 15.10.2015
Сообщений: 13

Спасибо, помогло! Но почему-то некорректно работает на iphone- все так же сначала прогружается часть страницы, а только потом появляется лоадер и пропадает еще до того как прогрузиться страница. Помогите пожалуйста.
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2020, 01:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,539

mikhail apalaev,
скрыть все элементы на странице (css)
показать Loader
по 'load', скрыть Loader , показать элементы страницы
примерно так
https://javascript.ru/forum/css-html...tml#post176659
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прелоадер пока выполняется скрипт agr Общие вопросы Javascript 2 11.06.2016 21:27
onClick не выполняет свою функцию lakusha Общие вопросы Javascript 2 31.01.2016 01:13
Jquery прелоадер razorg1991 jQuery 1 26.11.2014 15:27
Нужно ли писать свою либу? Dim@ Оффтопик 53 17.08.2012 00:13
Как узнать, завершила ли свою работу рекурсивная функция Ajax Общие вопросы Javascript 4 13.05.2009 14:50