LazyLoad Плагин jQuery для постзагрузки изображений на сайте. Сразу загружается станица без картинок, они подтягиваются после. Этот плагин позволяет отложить загрузку изображений, которые ещё не видны пользователю на экране. Все это значительно ускоряет визуальную загрузку страницы. Пример работы плагина можно увидеть и ощутить на сайте mashable.com
В этой статье рассмотрим установку плагина LazyLoad в шаблон Битрикс, настроив отложенную загрузку изображений в фотогалерее.
Скачайте архив jquery.lazyload.rar с плагином и распакуйте. Js файл мы положим в папку основного шаблона сайта.
Подключим плагин в header.php шаблона main
Затем переходим к редактированию шаблона, например списка новостей.
Чтобы подключить плагин к картинке анонса новостей нужно задать ей класс lazy и атрибут data-original который хранит ссылку на изображение.
<div class="content">
<a href="<?=$arItem['DETAIL_PAGE_URL']?>">
<img class="lazy" data-original = "<?=$previewImage['src']?>" />
</a>
<p><?=$arItem['PREVIEW_TEXT']?></p>
</div>
И не забыть вызвать функцию плагина
$(document).ready(function() {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
Посетитель сайта может видеть иконку прогрузки изображения, пока оно не загрузилось, для этого ссылку на иконку помещаем в атрибут src
<div class="content">
<a href="<?$arItem['DETAIL_PAGE_URL']?>">
<img class="lazy"
data-original = "<?=$previewImage['src']?>"
src="/img/ajax.preloader.gif" />
</a>
<p><?=$arItem['PREVIEW_TEXT']?></p>
</div>
Все готово, теперь наши изображения «лениво» загружаются на странице =)