Прелоадер не выполняет свою задачу!
Прелоадер срабатывает не сразу, перед ним успевает прогрузиться часть содержимого страницы.
Начало 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'); } |
Цитата:
|
Спасибо, помогло! Но почему-то некорректно работает на iphone- все так же сначала прогружается часть страницы, а только потом появляется лоадер и пропадает еще до того как прогрузиться страница. Помогите пожалуйста.
|
mikhail apalaev,
скрыть все элементы на странице (css) показать Loader по 'load', скрыть Loader , показать элементы страницы примерно так https://javascript.ru/forum/css-html...tml#post176659 |
| Часовой пояс GMT +3, время: 16:47. |