Отображение визуальной информации, такой как фотографии товаров, в списках — это стандартная задача для современных интерфейсов на базе 1С:Предприятия 8.3. Однако реализация этой функции в динамическом списке (ДС) требует понимания механизмов клиент-серверного взаимодействия и особенностей отрисовки форм. Разберем подробно несколько эффективных способов решения этой задачи, а также методы оптимизации, чтобы интерфейс работал плавно и без задержек.
Рассмотрим вариант, когда мы динамически формируем ссылки на изображения в момент получения данных списком. Этот метод позволяет гибко управлять тем, какая именно картинка будет выведена. Для реализации нам потребуется перехватить событие ПриПолученииДанныхНаСервере у элемента формы Список.
Проанализируем программный код, который выполняет эту задачу:
&НаСервереБезКонтекста
Процедура СписокПриПолученииДанныхНаСервере(ИмяЭлемента, Настройки, Строки)
Для Каждого КлючИЗначение Из Строки Цикл
// КлючИЗначение.Ключ — это ссылка на объект номенклатуры или записи регистра
// КлючИЗначение.Значение.Данные — структура данных текущей строки
КлючИЗначение.Значение.Данные.НавигационнаяСсылкаКартинки = ПолучитьНавигационнуюСсылку(КлючИЗначение.Ключ, "ДвоичныеДанныеФайла");
КонецЦикла;
КонецПроцедуры
Важный нюанс: Чтобы этот код заработал, в самом динамическом списке (в его основной таблице или через запрос) должно быть добавлено поле с типом Строка, в которое мы будем записывать путь. В свойствах элемента формы, связанного с этим полем, необходимо установить вид Поле картинки. Выясним причину, по которой этот метод может замедлять работу: при каждой прокрутке сервер вынужден заново генерировать ссылки для каждой видимой строки.
Если версия платформы 8.3.16 и выше, мы можем обойтись без программного перебора строк, переложив формирование ссылки на сам движок динамического списка. Посмотрим, как это сделать структурно:
НоменклатураПрисоединенныеФайлы).Рассмотрим подробнее преимущество этого подхода: платформа самостоятельно оптимизирует кэширование изображений. Однако, чтобы список не выглядел «дерганым», необходимо зафиксировать Высоту строки в свойствах таблицы. Если высота будет определяться автоматически по картинке, то строки разной высоты создадут дискомфорт при прокрутке.
Иногда вывод картинок непосредственно в таблицу перегружает интерфейс. В таком случае разберем альтернативный вариант: отображение картинки в отдельной области формы (справа или снизу) при активации строки. Чтобы избежать зацикливания и «тормозов» при быстром перемещении по списку, используем ПодключитьОбработчикОжидания.
Алгоритм реализации будет следующим:
В событии ПриАктивизацииСтроки мы не вызываем сервер сразу, а лишь взводим «таймер»:
&НаКлиенте
Процедура СписокПриАктивизацииСтроки(Элемент)
ОтключитьОбработчикОжидания("ОбновитьОтображениеКартинки");
ПодключитьОбработчикОжидания("ОбновитьОтображениеКартинки", 0.2, Истина);
КонецПроцедуры
&НаКлиенте
Процедура ОбновитьОтображениеКартинки()
ТекущиеДанные = Элементы.Список.ТекущиеДанные;
Если ТекущиеДанные <> Неопределено Тогда
// Здесь получаем навигационную ссылку и присваиваем её реквизиту формы
АдресКартинкиНаФорме = ПолучитьНавигационнуюСсылку(ТекущиеДанные.Ссылка, "ОсновнаяКартинка");
КонецЕсли;
КонецПроцедуры
Этот метод гарантирует, что серверный вызов произойдет только тогда, когда пользователь остановил курсор на товаре более чем на 200 миллисекунд. Это значительно снижает нагрузку на базу данных.
Проанализируем типичную проблему: в базе хранятся качественные фотографии размером 5-10 Мб. Если выводить их в список 50x50 пикселей, платформа все равно будет скачивать полный объем данных и сжимать его на клиенте. Это критическая ошибка проектирования.
Рекомендуемое решение:
ДанныеФайлов (если используется БСП).Такой подход позволяет сократить объем передаваемого трафика в десятки раз, обеспечивая мгновенную прокрутку даже при тысячах элементов в списке.
Начиная с версии 8.3.18, мы можем использовать свойство таблицы Режим отображения. Если установить его в значение Список (в понимании плиточного интерфейса), платформа предоставит более современные инструменты для работы с визуальным контентом. В этом режиме система сама управляет потоковой загрузкой изображений, что делает работу пользователя максимально похожей на привычные интернет-магазины.
Выясним еще один важный момент касательно кэширования: если картинка товара была изменена, но ссылка осталась прежней (тот же ID объекта), пользователь может видеть старое изображение. Чтобы избежать этого, рекомендуется добавлять к навигационной ссылке временную метку или версию файла в качестве параметра, например: "&v=" + Формат(ДатаИзменения, "ДФ=yyyyMMddHHmmss").
Подводя итог, можно сказать, что наиболее универсальным и производительным методом для современных конфигураций является сочетание предварительной генерации миниатюр и использования вычисляемых полей в запросе ДС с правильной настройкой свойств поля формы (Поле картинки, Пропорционально).