Отложенная загрузка контента с помощью технологии ajax 12 Октября 2012

Отложенная загрузка контента с помощью технологии ajax

Проблема скорости загрузки веб-страницы рано или поздно начинает беспокоить как разработчиков так и их клиентов.

А возникает эта проблема в случае, в первую очередь, увеличения нагрузки на сервер - элементарного увеличения посещаемости. А если и количество данных велико - рекомендую использовать отложенную загрузку части информационных блоков уже после окончательной загрузки страницы. 

Например, Ваша страница по высоте в несколько раз превышает разрешающую способность среднестатистического монитора. В таком случае зачем весь контент страницы загружать в один момент? Можно же показать посетителю только то, что видно в первую очередь на мониторе, а пока человек будет "рассматривать" видимую часть странички - подгрузить и остальную, содержащую объемные данные.

Где можно использовать:

  • рекомендую все виджеты социальных сетей (кнопки like, отправить и пр.) загружать именно этим сопособом: не всегда их сервера откликаются моментально, а при загрузке страницы ожидание может быть и длительным;
  • выводить компоненты Битрикс, которым в силу определенных причин нельзя кешировать данные;
  • выводить данные из инфоблока с десятками тысяч элементов, имеющих не первостепенное значение на сайте.

В этом случае все, что необходимо для корректной работы, это подключить библиотеку jQuery Лучше всего сослаться на файл в облачном хранилище Google, например,  http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Далее, в нужном месте документа вставляем код, который будет вызывать содержание файла, где, в свою очередь, будет храниться информация, подгружаемая на основную страницу:

<script>
var t = setTimeout( function() {
$.ajax({
url: "/ajax.php",
cache: true,
async: true,
success: function(html){
$("#ajax_block").append(html);
}
});
}, 500 );
</script>
<div id="ajax_block">
</div>

Параметры в указанном коде следущие:

async - асинхронность запроса, по умолчанию true
cache - вкл/выкл кэширование данных браузером, по умолчанию true
url - url запрашиваемой страницы
500 - время в миллисекундах, которое должно пройти после загрузки страницы до начала загрузки указанного файла

Есть и другие параметры, их Вы легко найдете на официальном сайте проекта jQuery.

Затем создается файл ajax.php, для включения в него компонентов 1С-Битрикс начать его нужно следующим образом:

<? define('STOP_STATISTICS', true);
require_once($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php');
$GLOBALS['APPLICATION']->RestartBuffer();?>

Этот код запрещает собирать статистику при открытии файла ajax.php, подключит только один пролог (необходимый для выполнения компонентов Битрикса, но не весь набор кода, как на обычной странице) и очистит буфер перед выводом Ajax-результата.

Далее, в этом файле, вы можете разместить любой компонент, к примеру, новости.

Описанный выше способ помог сократить время загрузки страницы на крупных проектах в несколько раз.


Теги: контент, загрузка, ajax, jQuery, битрикс

Возврат к списку


Материалы по теме:


Комментарии

0
Иван
Скажите, а если в этом файле ajax.php содержится цикл php, он вообще должен исполнится?
Потому как у меня не выводится пустой div id="ajax_block"
Имя Цитировать
0
Александр Погорелый
По сути, это обычный подключаемый файл, только с отсрочкой.
Имя Цитировать
0
иван
Цитата
Александр Погорелый пишет:
По сути, это обычный подключаемый файл, только с отсрочкой.
Да, согласен, но вот отдается почему-то пустой див. Будто бы в php ничего не было. Хотя, если в него тупо вбить какой-то текст, тогда отложенный импорт идет. А вот цикл не выводится....
Имя Цитировать
0
Александр Погорелый
Могу предположить, что дело в самом цикле, потому как этим способом выводил и вывожу целые компоненты
Имя Цитировать
0
Иван
Цитата
Александр Погорелый пишет:
Могу предположить, что дело в самом цикле, потому как этим способом выводил и вывожу целые компоненты
Да, уже разобрался, дело было действительно в цикле. Сайт на WP. Цикл заработал только после подключения wp-load в файле с циклом.
Спасибо за помощь.
Имя Цитировать
0
Guest
Добрый день! очень актуальная тема)

как это будет работать с умным фильтром, никто не пробовал?
Имя Цитировать
0
Руслан
умный фильтр битрикса
Имя Цитировать
0
Guest
Огромное спасибо за пример!!!!!! Очень долго искал и вуаля!!!!! :D :D :D :D :D :D :D :D :D
Имя Цитировать
0
ПATPИOT
[url=http://multiki-online24.ru/2616-otdyhay-skubi-du-2007.html]отдыхай скуби ду смотреть онлайн[/url]
Имя Цитировать
0
Guest
Цитата
Иван пишет:
Да, уже разобрался, дело было действительно в цикле. Сайт на WP. Цикл заработал только после подключения wp-load в файле с циклом.
У меня такая же проблема Не подскажешь, что именно ты сделал?
Имя Цитировать
0
Паша
Спасибо! Полезный код, тока плагины не хотят работать. Не могу понять как инициализировать плагин jquery в подгруженном файле аякс.
Имя Цитировать
0
Паша
Здравствуйте! Тестирую ваш код. И проверка скорости загрузки сайта от google. Говорит что ajax файл подгружается во время загрузки страницы. В чём тогда смысл ajax?
Имя Цитировать
0
Максим
Возвращает []
Имя Цитировать
 
Текст сообщения*
Защита от автоматических сообщений