Техподдержка сайтов
+7 (904) 589-06-04
+7 (904) 589-06-04
s.golikov1
info@sng-it.ru
Сайт программиста 1С Битрикс
Сайт программиста
1C Битрикс
(создание и поддержка сайтов)
О себе
Услуги
  • Перевод сайта на https
  • Создание сайтов
  • Интеграция сайта с 1С
  • Выгрузка товаров в Яндекс.Маркет
  • Композитный сайт
  • Внутренняя оптимизация сайта
  • Доработка сайтов
  • Импорт каталога из файла поставщика
  • Перенос сайта на 1С Битрикс
  • Парсинг контента
  • Установка готового сайта
  • Купить лицензию 1С Битрикс
  • Битрикс 24
  • Настройка служб доставки
  • Интеграция с соцсетями
  • Заказ на Маркете
  • Сопровождение сайтов на 1С Битрикс
  • Поиск и удаление вирусов
  • Настройка платежных систем
  • Выгрузка товаров на Hotline
Портфолио
Готовые сайты
  • Недвижимость
  • Медицина
  • Ресторанный бизнес
  • Автомобили и автозапчасти
  • Бухгалтерские и юридические услуги
  • Государство
  • Детские товары
  • Красота и здоровье
  • Мебель, интерьер, декор
  • Образование
  • Одежда и обувь
  • Подарки и сувениры
  • Продукты питания
  • Спорт, туризм и отдых
  • Строительство, ремонт, инструменты
  • Товары для животных
  • ТСЖ, ЖСК
  • Украшения, аксессуары, подарки
  • Электроника и бытовая техника
  • Универсальные
  • Разное
1С Битрикс
  • Старт (6 200 ₽)
  • Стандарт (17 900 ₽)
  • Малый бизнес (40 900 ₽)
  • Бизнес (83 900 ₽)
  • Интернет-магазин + CRM (99 000 ₽)
  • Продление лицензии
  • Сравнить редакции
CRM
  • Битрикс24
Контакты
Ещё
    Сайт программиста 1С Битрикс
    Сайт программиста
    1C Битрикс
    О себе
    Услуги
    Портфолио
    Готовые сайты
    1С Битрикс
    CRM
    Контакты
    Сайт программиста 1С Битрикс
    Сайт программиста
    1C Битрикс
    • Главная
    • О себе
    • Услуги
      • Назад
      • Услуги
      • Перевод сайта на https
      • Создание сайтов
      • Интеграция сайта с 1С
      • Выгрузка товаров в Яндекс.Маркет
      • Композитный сайт
      • Внутренняя оптимизация сайта
      • Доработка сайтов
      • Импорт каталога из файла поставщика
      • Перенос сайта на 1С Битрикс
      • Парсинг контента
      • Установка готового сайта
      • Купить лицензию 1С Битрикс
      • Битрикс 24
      • Настройка служб доставки
      • Интеграция с соцсетями
      • Заказ на Маркете
      • Сопровождение сайтов на 1С Битрикс
      • Поиск и удаление вирусов
      • Настройка платежных систем
      • Выгрузка товаров на Hotline
    • Портфолио
    • Готовые сайты
      • Назад
      • Готовые сайты
      • Недвижимость
      • Медицина
      • Ресторанный бизнес
      • Автомобили и автозапчасти
      • Бухгалтерские и юридические услуги
      • Государство
      • Детские товары
      • Красота и здоровье
      • Мебель, интерьер, декор
      • Образование
      • Одежда и обувь
      • Подарки и сувениры
      • Продукты питания
      • Спорт, туризм и отдых
      • Строительство, ремонт, инструменты
      • Товары для животных
      • ТСЖ, ЖСК
      • Украшения, аксессуары, подарки
      • Электроника и бытовая техника
      • Универсальные
      • Разное
    • 1С Битрикс
      • Назад
      • 1С Битрикс
      • Старт (6 200 ₽)
      • Стандарт (17 900 ₽)
      • Малый бизнес (40 900 ₽)
      • Бизнес (83 900 ₽)
      • Интернет-магазин + CRM (99 000 ₽)
      • Продление лицензии
      • Сравнить редакции
    • CRM
    • Контакты
    • Личный кабинет
    • +7 (904) 589-06-04
    Будьте на связи
    info@sng-it.ru
    • Вконтакте
    • YouTube

    Фоновая загрузка картинок vue lazyload на битриксе

    • Главная
    • ❶ Сниппеты
    • ❷ Фоновая загрузка картинок vue lazyload на битриксе
    Фоновая загрузка картинок vue lazyload на битриксе VUE.JS - это javascript фрэймворк, с версии 18.5 его добавили в ядро битрикса, поэтому можно его использовать из коробки.
    Фоновая загрузка актуальна, когда на странице есть тяжелые фото и нужно ускорить загрузку, для этого сначала подгружают картинки прелоадеры(это могут быть пережатые легкие версии основных картинок), а после загрузки, отображают основные изображения.

    Примеров реализации фоновой загрузки много, на разных фрэймворках. Реализация на vue.js интересна, т.к реактивное программирование динамично развивается и с помощью него можно получить большую производительность. Рассмотрим, как это реализуется технически на vue.js:

    1. Подключаем vue
    \Bitrix\Main\UI\Extension::load("ui.vue");

    2. Подключаем расширение lazyload
    \Bitrix\Main\UI\Extension::load("ui.vue.directives.lazyload");

    3. Устанавливаем в html:
    id="components-demo" - идентификатор элемента
    v-bx-lazyload - директиву
    data-lazyload-src - путь до основного изображения
    data-lazyload-error-src - путь до изображения, если не удалось загрузить основное
    data-lazyload-dont-hide - картинка не будет скрываться после скролинга страницы
    src - путь до прелоадера
    <div id="components-demo">
    <img v-bx-lazyload data-lazyload-dont-hide data-lazyload-src="/upload/iblock/250/learning.png" data-lazyload-error-src="/images/px.png" src="/images/px.png" alt="Разработчик Bitrix Framework" />
    </div>


    4. Создаем компонент <sc ript> BX.Vue.create({ el: '#components-demo' }); </sc ript>

    Теги: vue.js, lazyload

    Поделиться:
    Назад к списку


    Пример загрузки изображений, при помощи lazyload:

    Сертификат ведущего партнера Timeweb
    Сертификат ведущего партнера Timeweb
    Сертификат официального партнера программы amoSTART
    Сертификат официального партнера программы amoSTART
    Пользователь сервиса Битрикс24
    Пользователь сервиса Битрикс24
    Компетенция «Интернет-магазин + CRM»
    Компетенция «Интернет-магазин + CRM»
    Компетенция «CRM»
    Компетенция «CRM»
    Компетенция «Битрикс24: Коробочная версия»
    Компетенция «Битрикс24: Коробочная версия»
    Курс для партнеров Битрикс24 - продажи и внедрение
    Курс для партнеров Битрикс24 - продажи и внедрение
    Технология Композитный сайт
    Технология Композитный сайт
    Разработчик Bitrix Framework
    Разработчик Bitrix Framework
    Администратор. Бизнес
    Администратор. Бизнес
    Администратор. Модули
    Администратор. Модули
    Администратор. Базовый
    Администратор. Базовый
    Контент-менеджер
    Контент-менеджер
    «Администрирование системы. Часть 3»
    «Администрирование системы. Часть 3»
    «Администрирование системы. Часть 2»
    «Администрирование системы. Часть 2»
    «Администрирование системы. Часть 1»
    «Администрирование системы. Часть 1»
    «Установка и настройка»
    «Установка и настройка»
    «Элементы управления. Обучающий курс»
    «Элементы управления. Обучающий курс»
    «Многосайтовость»
    «Многосайтовость»
    «Конфигурирование веб-систем для оптимальной работы»
    «Конфигурирование веб-систем для оптимальной работы»
    «Компоненты 2.0»
    «Компоненты 2.0»
    «Интеграция»
    «Интеграция»
    Композитный сайт
    Композитный сайт
    Компетенция Битрикс24
    Компетенция Битрикс24
    Интеграция с 1С
    Интеграция с 1С
    Участник программы качества внедрений
    Участник программы качества внедрений
    Золотой партнер Битрикс24
    Золотой партнер Битрикс24
    Золотой сертифицированный партнер
    Золотой сертифицированный партнер
    Интеграция дизайна и настройка платформы
    Интеграция дизайна и настройка платформы

    • Услуги
    • Услуги
    • Блог
    • Видеоуроки
    • Скидки на 1C Битрикс
    • Новости интернета
    • Сниппеты

    Аудит сайта

    © 2010-2023 Сайт битрикс программиста Семена Голикова.

    Отправляя любую форму на сайте, вы соглашаетесь с политикой конфиденциальности данного сайта.
    - карта сайта
    Главное
    Информация
    Помощь
    • О себе
    • Услуги
    • Готовые сайты
    • Портфолио
    • Купить лицензию 1С Битрикс
    • Битрикс24
    • Контакты
    • Акции
    • Видеоуроки
    • Блог
    • Новости интернета
    • Про интеграцию с 1С
    • Внутренняя оптимизация сайта
    • Сниппеты
    • Хостинг для битрикс
    • Партнерам
    • Отзывы
    • Техподдержка
    +7 (904) 589-06-04
    - позвонить в WhatsApp
    Социальные сети:
    - карта сайта © 2010-2023 Сайт битрикс программиста Семена Голикова.
    Отправляя любую форму на сайте, вы соглашаетесь с политикой конфиденциальности данного сайта.