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

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

HIT

01.02.2016

4190

Создадим эффект перехода внутри сайта имитирующий подгрузку контента 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/

[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Загрузка JavaScript динамически

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

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

Избранное

Избранное

Реализуем функционал Избранное. Нам надо сделать кнопку добавить в Избранное в шаблоне самой записи и в цикле вывода записей категории. И отдельная страница Избранное где выводятся избранные записи. Плагин Favorites Читать далее »

Юр. или физ. лицо при оформлении

Юр. или физ. лицо при оформлении

Расширим функционал Woocommerce выбором при оформлении заказа: юр. или физ. лицо. Естественно данный выбор будет влиять на множество аспектов самого процесса заказа и прочих функций WC. Создание переключателя и полей Читать далее »

/

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

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

Имитация Ajax загрузки контента
URL, ссылки страниц, ЧПУ
Рекомендации для васURL, ссылки страниц, ЧПУOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.