Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.04.2018, 15:09
Интересующийся
Отправить личное сообщение для Alexodiy Посмотреть профиль Найти все сообщения от Alexodiy
 
Регистрация: 22.09.2017
Сообщений: 16

Плавный переход на другую страницу
Всем привет. Имею jQuery код, который создает эффект плавного перехода по страницам сайта, такого вида:

$(document).ready(function() {
	
	$("body").css("display", "none");

    $("body").fadeIn(2000);
    
	$("a.transition").click(function(event){
		event.preventDefault();
		linkLocation = this.href;
		$("body").fadeOut(1000, redirectPage);		
	});
		
	function redirectPage() {
		window.location = linkLocation;
	}
	
});


Все хорошо работает, но есть одно но... С целью ускорить загрузку страницы, библиотека jquery подключена перед тегом </body> и в последствии скрипт отрабатывает уже после того как загружены все элементы. Если саму библиотеку со скриптом использовать в <head> то скрипт отработает как надо.

Как написать тот же скрипт только на чистом js, чтобы юзануть его в <head>, подскажите пожалуйста, ну или порекомендуйте другое решение. Был бы очень признателен, если бы показали как это сделать на js
Ответить с цитированием
  #2 (permalink)  
Старый 16.04.2018, 00:29
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,544

jquery кешируется браузером, так что особо не переживайте, с скорости вы сильно не потеряете.
сжатие изображений всего на пару процентов даст больший прирост скорости загрузки!
Ответить с цитированием
  #3 (permalink)  
Старый 16.04.2018, 00:41
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,544

но если уж так хочется можно заменить на

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
	transition: 10s;
	opacity: 0;
		}
	</style>
</head>
<body>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita magni quos perferendis aperiam sunt perspiciatis, excepturi, minus nam natus tenetur fugiat libero sint voluptates hic, cumque repudiandae rerum corporis quas. Alias dolore rem suscipit molestias non soluta culpa quam consequuntur vero. Explicabo odit reprehenderit omnis consequatur rerum ratione, ipsum aut quas, harum quae modi, blanditiis culpa in repellendus esse eum laudantium commodi nihil maxime temporibus amet. Tempore aut, doloribus aspernatur eos debitis, obcaecati, veniam labore placeat quidem quo facilis vero, explicabo possimus autem! Id dicta odio officiis quia placeat unde totam vel amet iste maiores soluta facere, eaque vero excepturi, minus, accusantium ipsa nemo ad! Dicta labore voluptate amet, rem quibusdam aspernatur fugiat nisi corporis molestiae ad consequuntur, soluta minima nobis nulla perferendis possimus dolorem! Maxime deleniti quas tempora voluptatum similique mollitia id veniam suscipit deserunt, adipisci hic corrupti debitis sint saepe, dolores reprehenderit officia possimus excepturi cum aliquam at minima facere explicabo! Aliquam fugiat minima ab, temporibus aperiam cumque provident repellat magnam velit quisquam, obcaecati, sapiente, laborum quae quis perspiciatis. Perspiciatis, nemo, autem. Dolores minus quae dolorem quas unde vel ut, porro quod fugit facilis cumque itaque, et consequatur ducimus ipsum. Qui, quasi sint odio beatae inventore veniam facere.
	<script>
		window.onload = function(){
			document.body.style.opacity = 1;
		};
	</script>
</body>
</html>


то же самое сделать для предыдущей страницы, только не появление, а исчезновение при переходе по ссылке, ток же добавить задержку с помощью setTimeout

Последний раз редактировалось j0hnik, 16.04.2018 в 00:48.
Ответить с цитированием
  #4 (permalink)  
Старый 16.04.2018, 07:27
Интересующийся
Отправить личное сообщение для Alexodiy Посмотреть профиль Найти все сообщения от Alexodiy
 
Регистрация: 22.09.2017
Сообщений: 16

Сообщение от j0hnik Посмотреть сообщение
jquery кешируется браузером, так что особо не переживайте, с скорости вы сильно не потеряете.
сжатие изображений всего на пару процентов даст больший прирост скорости загрузки!
Получается, я все время зря парился с этим ? Всегда старался вниз поставить библиотеку
Ответить с цитированием
  #5 (permalink)  
Старый 16.04.2018, 11:25
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,078

Сообщение от j0hnik
jquery кешируется браузером, так что особо не переживайте, с скорости вы сильно не потеряете.
Сообщение от Alexodiy
Получается, я все время зря парился с этим ? Всегда старался вниз поставить библиотеку
Первая загрузка будет существенно дольше последующих.
Подключение библиотеки в конце документа не ускорит загрузку страницы, однако пользователь раньше увидит основной контент страницы, нежели если бы скрипты подключались в head.

Я для мобильной версии одного сайта также подключал все скрипты в конце документа, для решения подобных неудобств все вызовы скриптов складывал в массив, который после загрузки DOM исполнял.

Что-то типа этого:
<head>
<script>var Arr=[]</script>
</head>
<body>
<script>Arr.push(function(){
$('body').remove();
});</script>
<script src="JQEURY"></script>
<script>
Arr.forEach(function(cb){
cb();
});
</script>
</body>
Ответить с цитированием
  #6 (permalink)  
Старый 16.04.2018, 13:37
Интересующийся
Отправить личное сообщение для Alexodiy Посмотреть профиль Найти все сообщения от Alexodiy
 
Регистрация: 22.09.2017
Сообщений: 16

И все же, можно ли как нибудь переписать этот скрипт под ванильный js

$(document).ready(function() {
	
	$("body").css("display", "none");

    $("body").fadeIn(2000);
    
	$("a.transition").click(function(event){
		event.preventDefault();
		linkLocation = this.href;
		$("body").fadeOut(1000, redirectPage);		
	});
		
	function redirectPage() {
		window.location = linkLocation;
	}
	
});


У меня получается только половину реализовать, синтаксис чистого js очень сложный для меня
Ответить с цитированием
  #7 (permalink)  
Старый 16.04.2018, 16:23
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,544

Сообщение от Nexus
Первая загрузка будет существенно дольше последующих.
поэтому лучше подключать с CDN, вероятность того что он в уже закеширован высока.
Ответить с цитированием
  #8 (permalink)  
Старый 16.04.2018, 16:48
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,544

Сообщение от Alexodiy
И все же, можно ли как нибудь переписать этот скрипт под ванильный js
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body{
		transition: 2s;
		opacity: 0;
	}
</style>
</head>
<body>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita magni quos perferendis aperiam sunt perspiciatis, excepturi, minus nam natus tenetur fugiat libero sint voluptates hic, cumque repudiandae rerum corporis quas. Alias dolore rem suscipit molestias non soluta culpa quam consequuntur vero. Explicabo odit reprehenderit omnis consequatur rerum ratione, ipsum aut quas, harum quae modi, blanditiis culpa in repellendus esse eum laudantium commodi nihil maxime temporibus amet. Tempore aut, doloribus aspernatur eos debitis, obcaecati, veniam labore placeat quidem quo facilis vero, explicabo possimus autem! Id dicta odio officiis quia placeat unde totam vel amet iste maiores soluta facere, eaque vero excepturi, minus, accusantium ipsa nemo ad! Dicta labore voluptate amet, rem quibusdam aspernatur fugiat nisi corporis molestiae ad consequuntur, soluta minima nobis nulla perferendis possimus dolorem!
	<a href="#" class="transition">ссылка</a>
	<script>
		window.onload = function(){
			document.body.style.opacity = 1;
		};
		document.addEventListener("DOMContentLoaded", function(){
			[].forEach.call(document.querySelectorAll("a.transition"), function(el){
				el.onclick = function(event){
					event.preventDefault();
					linkLocation = this.href;
					document.body.style.transition = '1s';
					document.body.style.opacity = 0;
					setTimeout(redirectPage,1000);
				};
			});
			function redirectPage() {
				window.location = linkLocation;
			}
		});
	</script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 16.04.2018, 21:45
Интересующийся
Отправить личное сообщение для Alexodiy Посмотреть профиль Найти все сообщения от Alexodiy
 
Регистрация: 22.09.2017
Сообщений: 16

Круто, только появление тоже плавное должно быть, но это уже допилю. Спасибо.
Ответить с цитированием
  #10 (permalink)  
Старый 16.04.2018, 22:11
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,544

Alexodiy,
так уже плавное
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переход на другую страницу с учетом регулярных выражений Goret Элементы интерфейса 8 02.11.2016 08:47
Переход на другую страницу с прокруткой к нужному блоку Tema52 Элементы интерфейса 8 30.11.2015 12:48
Переход на другую страницу Step48_rus AJAX и COMET 5 22.09.2015 13:46
Переход на другую страницу Step48_rus jQuery 1 14.09.2015 23:26
Переход на другую страницу Deep Internet Explorer 2 11.01.2010 11:58