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

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

HIT

01.02.2016

2174

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

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Отложенная загрузка изображений

Отложенная загрузка изображений

Если на странице есть несколько изображений или есть изображения дублирующиеся на всех страницах (header, footer), то чтобы ускорить общую загрузку сайта, можно установить для изображений отложенную загрузку. Изображение будет появляться Читать далее »

Подгрузка постов «налету» I: Скроллинг

Подгрузка постов «налету» I: Скроллинг

Добавляем на сайт функционал подгрузки постов «налету». Данная технология применяется в соц. сетях, а также крупных интернет-магазинах. В funсtion.php // Добавляем подгрузку постов function true_loadmore_scripts() { wp_enqueue_script('jquery'); // скорее всего Читать далее »

Фильтр Ajax

Фильтр Ajax

Очередная попытка сделать фильтр wordpress, в этот раз применяя технологию ajax. По сути программирование фильтра — это изобретение велосипеда, но есть 2 момента: во-первых в процессе я начинаю лучше понимать Читать далее »

/

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

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

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