Плавный переход на другую страницу
Всем привет. Имею 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 |
jquery кешируется браузером, так что особо не переживайте, с скорости вы сильно не потеряете.
сжатие изображений всего на пару процентов даст больший прирост скорости загрузки! |
но если уж так хочется можно заменить на
<!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 |
Цитата:
|
Цитата:
Цитата:
Подключение библиотеки в конце документа не ускорит загрузку страницы, однако пользователь раньше увидит основной контент страницы, нежели если бы скрипты подключались в 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>
|
И все же, можно ли как нибудь переписать этот скрипт под ванильный 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 очень сложный для меня |
Цитата:
|
Цитата:
<!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>
|
Круто, только появление тоже плавное должно быть, но это уже допилю. Спасибо.
|
Alexodiy,
так уже плавное |
| Часовой пояс GMT +3, время: 12:03. |