Мгновенное отображение страницы

Сегодня речь пойдет о реализации механизма мгновенного отображения содержания страницы. Представьте, что вы нажимаете на ссылку и не успели отжать кнопку, как страница уже загрузилась. Как такое возможно? Спросите вы. Возможно, и на сегодняшний день существует не мало таких технологий.

Мы будем отталкиваться от идеи минимального ввода данных от пользователя. Пользователь и так водит мышкой и способен передать достаточно данных, чтобы система догадалась и предвидела его следующий шаг.
Один из таких способов давно известен — повесить в заголовок нашей страницы атрибут

<link rel="next" href="next_link.php" />

Этот способ подходит только для случаев, когда данная ссылка должна быть нажата как продолжение блока страниц. В остальных случаях — он может только навредить. Браузеры сами загружают данную страницу сразу после загрузки текущей и кешируют ее содержание в буфер. Зато поисковики — увидев данный атрибут — считают его связью как продолжением данной страницы и индексируют как одно целое, что очень плачевно. А также данный атрибут может быть только один.
Другой способ ускорить отображение данных — использовать Аякс. Но во-первых — это не мгновенно, а, во-вторых, — поисковики не очень хорошо индексируют частичные подгрузки страниц.
Среди прочих способов ускорить загрузку — является использование протокола SPDY.

Но все это лишь ускоряет загрузку, как же отобразить страницу мгновенно?

Да, на расчет данных — может потребоваться обработка на сервере, по этому — мгновенно отобразить целую страницу — никак нельзя.
Фокус в том, что страницу отобразить нельзя, пока она вычисляется на сервере, но для клиента можно отобразить заглушку. Замечали, что когда на экране появляется прогресс-бар — она как будто быстрее загружается?.. Вот эффект примерно тот же самый. Но!
Заглушкой может быть и статичный кусок текста новой загружаемой страницы. Да, на странице есть какой-то статический кусок, заголовок, меню, текст... Как можно больше всего, чтобы показать пользователю где примерно будут отображаться элементы на странице, чтобы он успел ее уже разглядеть и примерно оценить куда нажимать дальше...
А когда страница полностью на сервере рассчитается — она отобразиться пользователю полностью во всей своей красе. Недостаток — только один — необходимость вести шаблоны заглушек для каждой страницы вместе со страницами, чтобы отличие было минимальным.

Техническая реализация

Естественно — яваскрипт. Только очень простой яваскрипт.

var templates={
  index: '<h1>Заголовок главной страницы</h1>Загрузка...'
}
var default_fast_load_content='#content';
var default_fast_load_loading_class=false;
function fast_load(object,content,loading_class){
  content=content||default_fast_load_content;
  loading_class=loading_class||default_fast_load_loading_class;
  var template=$(object).attr('template');
  if (typeof(templates[template])=='string'){
    if (loading_class)$(object).addClass(loading_class);
    $(window).scrollTop(0);
    $(content).html(templates[template]).fadeTo(0,.5);
  }
}
$(function(){
  $('a[template]').click(function(){
    fast_load(this);
  });
})

Одна простая функция из 10 строк.
Не нравятся глобальные переменные default_fast_load_content и  default_fast_load_loading_class — воткните их в тело функции.

Как работает эта магия?

Всем ссылкам при загрузке страницы с атрибутом template – присваивается функция — onclick=”fast_load(this)”
Можете также проставить ее самостоятельно, если не хотите универсально.
При нажатии на ссылку — первой срабатывает наша замечательная функция. Функция ищет в базе шаблонов templates – соответствующий шаблон. Если находит — заменяет им содержание основного блока — в нашем случае #content и делает его полупрозрачным, а также сразу перемещает окно к верхней области, как это делает браузер при загрузки страницы, чтобы окно не прыгало. Все.
Использовать данный метод удобно при загрузке, например, страниц авторизации, регистрации, о нас. Небольших статичных страниц, или начала больших страниц. Все что внизу — не обязательно выводить сразу, а верхушку можно показать...
После отработки функции происходит вызов скрипта и как только он будет готов — заменит собой всю страницу вместе с заглушкой. Вариант очень простой и универсальный. Спасибо за внимание. Успехов в развитии передовых технологий.
Пример работы скрипта — можете посмотреть на страницах данного сайта. Пощелкайте по вкладкам вход-регистрания-написать пост