/ Сайтостроение / Scripts & jquery / Имитация Ajax загрузки контента

Имитация Ajax загрузки контента

HIT

01.02.2016

1775

Создадим эффект перехода внутри сайта имитирующий подгрузку контента ajax’ом, как будто без перезагрузки. Принцип эффекта: при переходе по ссылке плавно скрываем изменяемую часть контента, и при загрузке новой плавно ее показываем. Не меняющаяся шапка и появляющийся значок загрузки создают эффект плавной загрузки.

Скрипт имитации

Скрипт имитирует подгрузку контента средствами ajax

<script type="text/javascript">
$(document).ready(function() {
$("#main-content").css("display", "none");

$("#main-content").fadeIn(1000);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#main-content").fadeOut(500, redirectPage);
});

function redirectPage() {
window.location = linkLocation;
}
});
</script>

А для того чтоб сайт не «прыгал» при появлении/исчезновении полосы прокрутки к body добавить свойство

body {overflow-y:scroll;}

Стили скроллинга

/* ScrolBar */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-thumb {background: #ddd; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}
::-webkit-scrollbar-thumb:hover {background: #B9B9B9;}
::-webkit-scrollbar-thumb:window-inactive {background: #999;}

Сделать также имитацию загрузки loader.gif

Иногда на сайтах в навигационном меню есть ссылки, которые не должны перезагружать сайта. Специально для них скрипт с некоторыми добавлениями и изменениями
+ добавлен еще один стиль для воздействия #landing — это для страницы лендинга, т.к. там может отсутствовать #main-content
+ локализация скрипта только на пунктах меню (читать ниже)

// Имитация загрузки контента Ajax'ом
//добавка для call-item и search-item

$(".call-item > a").addClass("call-item");
$(".search-item > a").addClass("search-item");

$("#main-content, #landing").css("display", "none");

$("#main-content, #landing").fadeIn(1000);

$(".menu-item a").not('.call-item, .search-item').click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#main-content, #landing").fadeOut(500, redirectPage);
});

function redirectPage() {
window.location = linkLocation;
}

Данный скрипт может частенько вступать в противоречие с другими элементами и модулями сайта, т.к. воздействует на ключевой элемент a (ссылку). Для предотвращения этого можно сократить область действия скрипта, прописав вместо a, например: .menu-item a, .title-post > a

Локализация активации скрипта

Решение противоречий с другими скриптами и ссылками сайта — локализация активации скрипта:

$(".menu-item a, .title_posit > a, .title > a").not('.call-item, .search-item').click(function(event){

Усиление эффекта

Получается более плавно, если строку скрипта

$("#main-content, #landing").css("display", "none");

заменить добавлением данным элементам стиля display: none;

Анимация загрузки при переходе

Прикольные spinner’ы на CSS
http://projects.lukehaas.me/css-loaders/

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Подгрузка постов «налету» II: Кнопка

Подгрузка постов «налету» II: Кнопка

Данный вариант подгрузки постов «налету» является альтернативой подгрузке постов при скроллинге. Только в данном методе посты будут подгружаться по нажатию на кнопку. Также учтены некоторые особенности шаблона данного сайта высота Читать далее »

Открывать запись во всплывающем окне

Открывать запись во всплывающем окне

Задача: открывать запись во всплывающем окне используя загрузку «налету» (ajax). При этом работает сколько угодно раз, т.е. при нажатии на другую ссылку — загружается другая запись по ID из ссылки. Читать далее »

Загрузка JavaScript динамически

Загрузка JavaScript динамически

Иногда требуется подгрузить скрипт на лету, в этом поможет технология Ajax. Обычный скрипт JavaScript динамически Создаем файл скрипта script-dinamic.js с содержимым // случайное число от 1 до 100 var rnd Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Имитация Ajax загрузки контента
Вложения записи (Attachment)
Рекомендации для васВложения записи (Attachment)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.