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

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

HIT

01.02.2016

1400

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

Тэги:

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

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

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

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

Избранное

Избранное

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

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

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

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

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

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

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