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

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

Мгновенная загрузка изображения

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

<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 и делает его полупрозрачным, а также сразу перемещает окно к верхней области, как это делает браузер при загрузки страницы, чтобы окно не прыгало. Все.
Использовать данный метод удобно при загрузке, например, страниц авторизации, регистрации, о нас. Небольших статичных страниц, или начала больших страниц. Все что внизу — не обязательно выводить сразу, а верхушку можно показать...
После отработки функции происходит вызов скрипта и как только он будет готов — заменит собой всю страницу вместе с заглушкой. Вариант очень простой и универсальный. Спасибо за внимание. Успехов в развитии передовых технологий.
Пример работы скрипта — можете посмотреть на страницах данного сайта. Пощелкайте по вкладкам вход-регистрания-написать пост

  • Автор: kosmom
  • Рейтинг: 0
  • Просмотров: 875
  • Комментариев: 0
  • Создан: 27.02.2014 16:40

Комментарии (0)

Ваши предложения и пожелания пишите на pro@kosmom.ru

Теги

backup bootstrap core framework eloquent excel home project html ios javascript keep-alive kpi laravel legacy mvp orm php rip scroll timestamp undefined vue vuetify watch безопасность биометрический паспорт ваша любаша для путешествий загран на 10 лет загран паспорт загранпаспорт нового образца зимние книги как заполнить анкеты кеширование книги на новый год логирование мцф недвижимость новогодние книги образец заполнения антеты паспорт для путешествий паспорт нового поколения печать продукт проектирование прокси разработка ремонт ремонт в апартаментах ремонт нежилого помещения самокат сдача сколько стоил ремонт апартаментов спорт стандарты таблица финансы хостинг цена ремонта что почитать зимой юзабилити

Случайный пост

19.09.2011 22:12
День первый