Техподдержка сайтов
+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
Портфолио
Готовые сайты
  • B2B
  • Автомобили и автозапчасти
  • Бухгалтерские и юридические услуги
  • Государство
  • Детские товары
  • Красота и здоровье
  • Мебель, интерьер, декор
  • Медицина
  • Мобильные приложения
  • Недвижимость
  • Образование
  • Одежда и обувь
  • Подарки и сувениры
  • Продукты питания
  • Ресторанный бизнес
  • Спорт, туризм и отдых
  • Строительство, ремонт, инструменты
  • Товары для животных
  • ТСЖ, ЖСК
  • Украшения, аксессуары, подарки
  • Универсальные
  • Электроника и бытовая техника
  • Разное
1С Битрикс
  • Старт (5 400 ₽)
  • Стандарт (15 900 ₽)
  • Малый бизнес (35 900 ₽)
  • Бизнес (72 900 ₽)
  • Интернет-магазин + CRM (99 000 ₽)
  • Продление лицензии
  • Сравнить редакции
CRM
  • Битрикс24
Контакты
Ещё
    Сайт программиста 1С Битрикс
    Сайт программиста
    1C Битрикс
    О себе
    Услуги
    • Перевод сайта на https
    • Создание сайтов
    • Интеграция сайта с 1С
    • Выгрузка товаров в Яндекс.Маркет
    • Композитный сайт
    • Внутренняя оптимизация сайта
    • Доработка сайтов
    • Импорт каталога из файла поставщика
    • Перенос сайта на 1С Битрикс
    • Парсинг контента
    • Установка готового сайта
    • Купить лицензию 1С Битрикс
    • Битрикс 24
    • Настройка служб доставки
    • Интеграция с соцсетями
    • Заказ на Маркете
    • Сопровождение сайтов на 1С Битрикс
    • Поиск и удаление вирусов
    • Настройка платежных систем
    • Выгрузка товаров на Hotline
    Портфолио
    Готовые сайты
    • B2B
    • Автомобили и автозапчасти
    • Бухгалтерские и юридические услуги
    • Государство
    • Детские товары
    • Красота и здоровье
    • Мебель, интерьер, декор
    • Медицина
    • Мобильные приложения
    • Недвижимость
    • Образование
    • Одежда и обувь
    • Подарки и сувениры
    • Продукты питания
    • Ресторанный бизнес
    • Спорт, туризм и отдых
    • Строительство, ремонт, инструменты
    • Товары для животных
    • ТСЖ, ЖСК
    • Украшения, аксессуары, подарки
    • Универсальные
    • Электроника и бытовая техника
    • Разное
    1С Битрикс
    • Старт (5 400 ₽)
    • Стандарт (15 900 ₽)
    • Малый бизнес (35 900 ₽)
    • Бизнес (72 900 ₽)
    • Интернет-магазин + CRM (99 000 ₽)
    • Продление лицензии
    • Сравнить редакции
    CRM
    • Битрикс24
    Контакты
    Ещё
      Сайт программиста 1С Битрикс
      Сайт программиста
      1C Битрикс
      • Главная
      • О себе
      • Услуги
        • Назад
        • Услуги
        • Перевод сайта на https
        • Создание сайтов
        • Интеграция сайта с 1С
        • Выгрузка товаров в Яндекс.Маркет
        • Композитный сайт
        • Внутренняя оптимизация сайта
        • Доработка сайтов
        • Импорт каталога из файла поставщика
        • Перенос сайта на 1С Битрикс
        • Парсинг контента
        • Установка готового сайта
        • Купить лицензию 1С Битрикс
        • Битрикс 24
        • Настройка служб доставки
        • Интеграция с соцсетями
        • Заказ на Маркете
        • Сопровождение сайтов на 1С Битрикс
        • Поиск и удаление вирусов
        • Настройка платежных систем
        • Выгрузка товаров на Hotline
      • Портфолио
      • Готовые сайты
        • Назад
        • Готовые сайты
        • B2B
        • Автомобили и автозапчасти
        • Бухгалтерские и юридические услуги
        • Государство
        • Детские товары
        • Красота и здоровье
        • Мебель, интерьер, декор
        • Медицина
        • Мобильные приложения
        • Недвижимость
        • Образование
        • Одежда и обувь
        • Подарки и сувениры
        • Продукты питания
        • Ресторанный бизнес
        • Спорт, туризм и отдых
        • Строительство, ремонт, инструменты
        • Товары для животных
        • ТСЖ, ЖСК
        • Украшения, аксессуары, подарки
        • Универсальные
        • Электроника и бытовая техника
        • Разное
      • 1С Битрикс
        • Назад
        • 1С Битрикс
        • Старт (5 400 ₽)
        • Стандарт (15 900 ₽)
        • Малый бизнес (35 900 ₽)
        • Бизнес (72 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-2022 Сайт битрикс программиста Семена Голикова.

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