
Отложенная загрузка контента с помощью технологии ajax
Проблема скорости загрузки веб-страницы рано или поздно начинает беспокоить как разработчиков так и их клиентов.
А возникает эта проблема в случае, в первую очередь, увеличения нагрузки на сервер - элементарного увеличения посещаемости. А если и количество данных велико - рекомендую использовать отложенную загрузку части информационных блоков уже после окончательной загрузки страницы.
Например, Ваша страница по высоте в несколько раз превышает разрешающую способность среднестатистического монитора. В таком случае зачем весь контент страницы загружать в один момент? Можно же показать посетителю только то, что видно в первую очередь на мониторе, а пока человек будет "рассматривать" видимую часть странички - подгрузить и остальную, содержащую объемные данные.
Где можно использовать:
- рекомендую все виджеты социальных сетей (кнопки like, отправить и пр.) загружать именно этим сопособом: не всегда их сервера откликаются моментально, а при загрузке страницы ожидание может быть и длительным;
- выводить компоненты Битрикс, которым в силу определенных причин нельзя кешировать данные;
- выводить данные из инфоблока с десятками тысяч элементов, имеющих не первостепенное значение на сайте.
В этом случае все, что необходимо для корректной работы, это подключить библиотеку jQuery Лучше всего сослаться на файл в облачном хранилище Google, например,
Далее, в нужном месте документа вставляем код, который будет вызывать содержание файла, где, в свою очередь, будет храниться информация, подгружаемая на основную страницу:
Параметры в указанном коде следущие:<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 - время в миллисекундах, которое должно пройти после загрузки страницы до начала загрузки указанного файла
Есть и другие параметры, их Вы легко найдете на
Затем создается файл 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, битрикс
Материалы по теме:
Комментарии
![]() |
Скажите, а если в этом файле ajax.php содержится цикл php, он вообще должен исполнится?
Потому как у меня не выводится пустой div id="ajax_block" |
![]() |
По сути, это обычный подключаемый файл, только с отсрочкой.
|
![]() | ||
| ||
![]() |
Могу предположить, что дело в самом цикле, потому как этим способом выводил и вывожу целые компоненты
|
![]() | ||
Спасибо за помощь. | ||
![]() |
Добрый день! очень актуальная тема)
как это будет работать с умным фильтром, никто не пробовал? |
![]() |
умный фильтр битрикса
|
![]() |
Огромное спасибо за пример!!!!!! Очень долго искал и вуаля!!!!!
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
![]() |
[url=http://multiki-online24.ru/2616-otdyhay-skubi-du-2007.html]отдыхай скуби ду смотреть онлайн[/url]
|
![]() | ||
| ||
![]() |
Спасибо! Полезный код, тока плагины не хотят работать. Не могу понять как инициализировать плагин jquery в подгруженном файле аякс.
|
![]() |
Здравствуйте! Тестирую ваш код. И проверка скорости загрузки сайта от google. Говорит что ajax файл подгружается во время загрузки страницы. В чём тогда смысл ajax?
|
![]() |
Возвращает []
|