LazyLoad

Реализует отложенную загрузку компонентов Платформы

Используется для ускорения загрузки страниц приложения на базе Платформы.

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
CSS	Массив строк-классов CSS-стилей компонента	array
Color	Цвет панели загрузки из палитры RGBA	string	black
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
FallbackHeight	Высота блока с индикатором загрузки; рекомендуемое значение равно высоте отображаемого компонента	string
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
LoaderSize	Размер значка индикатора загрузки	enum	Default	`Default` - 24px `Micro` - 12px `Small` - 18px `Large` - 48px
Mode	Режимы работы компонента	enum	Default	`ByOne` - Отображение по одному компоненту, которые находятся в видимой области страницы `InfinityScrolling` - Отображение страницы по достижению последнего компонента видимой области страницы без прокрутки
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnPageChange	Обработчик события изменения страницы; возвращает номер страницы	undefined
OnUnmount	Обработчик события Unmount	undefined
RootMargin	Строка с отступами для видимой области; синтаксис аналогичен CSS-свойству margin — '0px 0px 0px 0px' (top, right, bottom, left), либо значения типа '50px 100px' или '200px'	string	40px
ShowLoader	Признак отображения индикатора загрузки	boolean	True
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
StartsFrom	Номер страницы, с которого начинается отображение данных	number	1
Timeout	Время ожидания для отображения компонентов в видимой области	number	5
To	Номер последней страницы списка элементов для отображения	number	2
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Trashhold	Пороговое значение, при котором будет вызван обработчик события OnPageChange; массив чисел от 0 до 1, либо набор значений, например [0, 0.25, 0.5, 1]. Для элементов, которые могут быть скрыты (например, в аккордеоне), рекомендуется устанавливать минимальное пороговое значение видимости больше 0. В противном случае первый элемент будет всегда загружаться, даже если аккордеон закрыт.	array	0
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

Скрипты:

const titles = [
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'Pellentesque placerat nunc nec erat scelerisque, sit amet sagittis magna dignissim.',
    'Etiam gravida, mauris lobortis cursus vulputate, sapien leo viverra lorem, at placerat ante felis sed lectus.'
];
const links = [
    'https://play-lh.googleusercontent.com/PCpXdqvUWfCW1mXhH1Y_98yBpgsWxuTSTofy3NGMo9yBTATDyzVkqU580bfSln50bFU',
    'https://www.atomic-energy.ru/files/images/2022/05/seminar8001.jpg',
    'https://i.ytimg.com/vi/IZvnUTMu-Aw/maxresdefault.jpg'
];
const combinedArray = [];
const chunkSize = 25;
const totalItems = 200;
    
for (let i = 0; i < totalItems; i++) {
    const chunk = [];
    for (let j = 0; j < chunkSize; j++) {
        const index = (i * chunkSize + j) % titles.length;
        chunk.push({
            title: titles[index],
            imageLink: links[index]
        });
    }
    combinedArray.push(chunk);
}
const byOne = [
    { title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', imageLink: 'https://play-lh.googleusercontent.com/PCpXdqvUWfCW1mXhH1Y_98yBpgsWxuTSTofy3NGMo9yBTATDyzVkqU580bfSln50bFU' }, 
    { title: 'Pellentesque placerat nunc nec erat scelerisque, sit amet sagittis magna dignissim.', imageLink: 'https://www.atomic-energy.ru/files/images/2022/05/seminar8001.jpg' }, 
    { title: 'Etiam gravida, mauris lobortis cursus vulputate, sapien leo viverra lorem, at placerat ante felis sed lectus.', imageLink: 'https://img4.goodfon.ru/original/1440x900/5/a5/react-framework-logo.jpg' },
    { title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', imageLink: 'https://play-lh.googleusercontent.com/PCpXdqvUWfCW1mXhH1Y_98yBpgsWxuTSTofy3NGMo9yBTATDyzVkqU580bfSln50bFU' }, 
    { title: 'Pellentesque placerat nunc nec erat scelerisque, sit amet sagittis magna dignissim.', imageLink: 'https://www.atomic-energy.ru/files/images/2022/05/seminar8001.jpg' }, 
    { title: 'Etiam gravida, mauris lobortis cursus vulputate, sapien leo viverra lorem, at placerat ante felis sed lectus.', imageLink: 'https://img4.goodfon.ru/original/1440x900/5/a5/react-framework-logo.jpg' },
    { title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', imageLink: 'https://play-lh.googleusercontent.com/PCpXdqvUWfCW1mXhH1Y_98yBpgsWxuTSTofy3NGMo9yBTATDyzVkqU580bfSln50bFU' }, 
    { title: 'Pellentesque placerat nunc nec erat scelerisque, sit amet sagittis magna dignissim.', imageLink: 'https://www.atomic-energy.ru/files/images/2022/05/seminar8001.jpg' }, 
    { title: 'Etiam gravida, mauris lobortis cursus vulputate, sapien leo viverra lorem, at placerat ante felis sed lectus.', imageLink: 'https://img4.goodfon.ru/original/1440x900/5/a5/react-framework-logo.jpg' },
    { title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', imageLink: 'https://play-lh.googleusercontent.com/PCpXdqvUWfCW1mXhH1Y_98yBpgsWxuTSTofy3NGMo9yBTATDyzVkqU580bfSln50bFU' }, 
    { title: 'Pellentesque placerat nunc nec erat scelerisque, sit amet sagittis magna dignissim.', imageLink: 'https://www.atomic-energy.ru/files/images/2022/05/seminar8001.jpg' }, 
    { title: 'Etiam gravida, mauris lobortis cursus vulputate, sapien leo viverra lorem, at placerat ante felis sed lectus.', imageLink: 'https://img4.goodfon.ru/original/1440x900/5/a5/react-framework-logo.jpg' },
];
setState({
    data: [],
    byOne,
    InfinityScrolling: combinedArray
})

JSX:

<Group Mode='ColumnWithScroll'>
  <Accordion 
    ArrowPos="Right" 
    Mode="Default" 
    Value={true}
    CSS={['mb-16']}
  >
    <Group Align="Start" VerticalAlign="Center">
      <Text Value="ByOne" />
    </Group>
    <Group Mode='ColumnWithScroll' Height='70vh'> 
      <Repeater Value-var="byOne" ItemAlias="item">
        <LazyLoad 
          Mode='ByOne'
          Trashhold={[0.01]}
          Timeout={300} 
          LoaderSize='Large'
          FallbackHeight='285px'
        >
          <Group 
            Mode='Column' 
            VerticalAlign='Space-between'
            Height='285px'
          > 
            <Text Max={2} Mode="Medium_32" Value-var="item.title" />
            <Image Width="200px" Value-var="item.imageLink" />
            <Separator Mode='Horizontal' />
          </Group>
        </LazyLoad>
      </Repeater>
    </Group>
  </Accordion>
  <Accordion 
    ArrowPos="Right" 
    Mode="Default" 
    Value={true}
    CSS={['mb-16']}
  >
    <Group Align="Start" VerticalAlign="Center">
      <Text Value="InfinityScrolling" />
    </Group>
    <Group Mode='ColumnWithScroll' Height='70vh'> 
      <LazyLoad 
        Mode='InfinityScrolling'
        LoaderSize='Large'
        RootMargin='0px'
        FallbackHeight='285px'
        StartsFrom={1}
        To={6}
        OnPageChange={ InfinityScrolling => {
          const data = getValue('data');
          const currentPage = getEvent().page;
          if ( currentPage === 1 ) {
            currentData = InfinityScrolling[currentPage]
          } else {
            currentData = [ 
              ...data,
              ...InfinityScrolling[currentPage + 1], 
            ]
          }
          setState({ data: currentData, currentPage });
        }}
      >
        <Repeater Value-var='data' ItemAlias="item">
          <Group 
            Mode='Column' 
            VerticalAlign='Space-between'
            Height='auto'
          > 
            <Text Max={2} Mode="Medium_32" Value-var="item.title" />
            <Image Width="200px" Value-var="item.imageLink" />
            <Separator Mode='Horizontal' />
          </Group>
        </Repeater>
      </LazyLoad>
    </Group>
  </Accordion>
</Group>

Свойства​

Примеры​

Свойства

Примеры