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

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

HIT

01.02.2016

3869

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

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Json Начало

Json Начало

JSON (JavaScript Object Notation) — это текстовый протокол обмена данными, чем-то похожий на более привычный XML, но данные записываются в нем более компактно. Изначально он был разработан для нужд JavaScript Читать далее »

Избранное

Избранное

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

Фильтр по меткам (изменение основного запроса)

Фильтр по меткам (изменение основного запроса)

Реализуем фильтрацию записей по меткам путем изменения основного запроса на лету (ajax). Находим все теги записей входящих в категорию Данный код можно вставить в боковую колонку в виде виджета. <?php Читать далее »

/ /

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

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

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