Написал модуль для автоматической генерации спрайтов.
Пока не выкладывал, сделаю это завтра, на свежую голову, тем более там все равно модерация несколько недель идет.
А сейчас хочу показать как можно будет использовать этот модуль и что он дает.
Итак, у нас есть страница с разделами каталога, каждый представлен картинкой и текстом - в сумме около 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="/images/no-photo-section-101.jpg" height="101" width="101" alt="" /> <?endif;?> |
P.S. Подключал к модулю сжатие png с помощью tinypng.org, но качество картинки не понравилось