15.04.2018, 15:09
|
|
Интересующийся
|
|
Регистрация: 22.09.2017
Сообщений: 26
|
|
|
Плавный переход на другую страницу
Всем привет. Имею 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 |
|
16.04.2018, 00:29
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
jquery кешируется браузером, так что особо не переживайте, с скорости вы сильно не потеряете.
сжатие изображений всего на пару процентов даст больший прирост скорости загрузки!
|
|
16.04.2018, 00:41
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
но если уж так хочется можно заменить на
<!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.
|
|
16.04.2018, 07:27
|
|
Интересующийся
|
|
Регистрация: 22.09.2017
Сообщений: 26
|
|
Сообщение от j0hnik
|
jquery кешируется браузером, так что особо не переживайте, с скорости вы сильно не потеряете.
сжатие изображений всего на пару процентов даст больший прирост скорости загрузки!
|
Получается, я все время зря парился с этим  ? Всегда старался вниз поставить библиотеку |
|
16.04.2018, 11:25
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
|
Сообщение от 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>
|
|
16.04.2018, 13:37
|
|
Интересующийся
|
|
Регистрация: 22.09.2017
Сообщений: 26
|
|
И все же, можно ли как нибудь переписать этот скрипт под ванильный 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 очень сложный для меня |
|
16.04.2018, 16:23
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Сообщение от Nexus
|
|
Первая загрузка будет существенно дольше последующих.
|
поэтому лучше подключать с CDN, вероятность того что он в уже закеширован высока. |
|
16.04.2018, 16:48
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Сообщение от 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>
|
|
16.04.2018, 21:45
|
|
Интересующийся
|
|
Регистрация: 22.09.2017
Сообщений: 26
|
|
|
Круто, только появление тоже плавное должно быть, но это уже допилю. Спасибо.
|
|
16.04.2018, 22:11
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Alexodiy,
так уже плавное
|
|
|
|
