Оптимизация. Автоматическое создание спрайтов
Запись от 22.01.2015
Написал модуль для автоматической генерации спрайтов.
Пока не выкладывал, сделаю это завтра, на свежую голову, тем более там все равно модерация несколько недель идет.
А сейчас хочу показать как можно будет использовать этот модуль и что он дает.
Итак, у нас есть страница с разделами каталога, каждый представлен картинкой и текстом - в сумме около 40 картинок,
Соответственно процесс загрузки страницы выглядит примерно так:
Это ооочень много запросов и всегда очень хотелось изменить эту ситуацию.
И вот день настал, вот так выглядит загрузка сейчас (страница выглядит абсолютно также):
Не смотря на то, что страница выросла в размере, кол-во запрашиваемых ресурсов резко сократилось и мне кажется, что это хорошо.
Для такого результата дорабатывается result_modifier.php и template.php шаблона компонента:
P.S. Подключал к модулю сжатие png с помощью tinypng.org, но качество картинки не понравилось
Пока не выкладывал, сделаю это завтра, на свежую голову, тем более там все равно модерация несколько недель идет.
А сейчас хочу показать как можно будет использовать этот модуль и что он дает.
Итак, у нас есть страница с разделами каталога, каждый представлен картинкой и текстом - в сумме около 40 картинок,
Соответственно процесс загрузки страницы выглядит примерно так:
Это ооочень много запросов и всегда очень хотелось изменить эту ситуацию.
И вот день настал, вот так выглядит загрузка сейчас (страница выглядит абсолютно также):
Не смотря на то, что страница выросла в размере, кол-во запрашиваемых ресурсов резко сократилось и мне кажется, что это хорошо.
Для такого результата дорабатывается result_modifier.php и template.php шаблона компонента:
// result_modifier.php:
// Собираем PNG картинки разделов
$arImages = Array();
foreach($arResult['SECTIONS'] as $keySection => &$arSection) {
if($arSection["PICTURE"] && $arSection["PICTURE"]["CONTENT_TYPE"] == "image/png") {
$arImages[$keySection] = $arSection["PICTURE"];
}
}
// Создаем спрайт и раскидываем результат по массиву $arResult
if($arImages) {
CModule::IncludeModule("top10.sprite");
$arSpriteImages = CTOP10Sprite::getSpriteImage(
$arImages,
"/images/catalog-main-sprite.png"
);
$arResult['SECTIONS_SPRITE'] = $arSpriteImages["SPRITE"];
foreach($arSpriteImages["IMAGES"] as $keySection=>$arImage) {
$arResult['SECTIONS'][$keySection]["PICTURE_SPRITE"] = $arImage;
}
}
// template.php
<?if($arResult['SECTIONS_SPRITE'] && $arSection["PICTURE_SPRITE"]):?>
<span st yle="<?=implode("; ", $arSection["PICTURE_SPRITE"]["STYLE"]);?>" alt="<?=$arSection['NAME']?>"></span>
<?elseif($arSection['PICTURE']['SRC']):?>
<img src="<?=$arSection['PICTURE']['SRC']?>" height="<?=$arSection['PICTURE']['HEIGHT']?>" width="<?=$arSection['PICTURE']['WIDTH']?>" alt="<?=$arSection['NAME']?>" />
<?else:?>
<img src="//opt-560835.ssl.1c-bitrix-cdn.ru/images/no-photo-section-101.jpg" height="101" width="101" alt="" />
<?endif;?>
P.S. Подключал к модулю сжатие png с помощью tinypng.org, но качество картинки не понравилось