Исключения: страницы, картинки и блоки

Иногда картинку нужно показать сразу: логотип, главный баннер, изображение в оформлении заказа. Плагин даёт четыре способа исключить элемент.

Поля исключений в настройках плагина

1. Одна картинка: атрибут data-lazyload=“false”

Добавьте атрибут в тег img:

<img data-lazyload="false" src="path/to/image.jpg">

Картинка загрузится как обычно. Это самый простой способ для логотипа и баннера.

2. Страницы: «Запрещённые страницы»

Список страниц, на которых плагин не работает.

  • Каждый адрес с новой строки.
  • Адрес пишется без http:// и https://: достаточно части адреса.
  • Символ / экранируется обратной косой чертой: \/.
  • Можно использовать регулярные выражения.

Пример:

checkout\/
my\/
product\/test-tovar\/

Плагин отключится на страницах, в адресе которых встречается checkout/, my/ или product/test-tovar/.

Не оставляйте пустых строк, в том числе в конце списка. Пустая строка подходит к любому адресу, и плагин перестанет работать на всём сайте.

3. Картинки по классу или атрибуту: «Запрещённые атрибуты»

Раздел «Тонкая настройка» открывается по клику на заголовок. В поле «Запрещённые атрибуты» перечислите слова (классы или атрибуты), по которым плагин узнаёт картинки без отложенной загрузки. Если такое слово есть в теге картинки, плагин её не трогает.

no-lazy
logo-header

Тогда <img class="logo-header" …> загружается обычным способом. Каждое значение на новой строке, пустых строк быть не должно.

4. Блоки при подгрузке контента: «Запрещённые html-контейнеры при изменении контента»

Плагин следит за страницей: если скрипты добавляют новые картинки (быстрый просмотр, «показать ещё», фильтр), он тоже обрабатывает их. В этом поле перечислите CSS-классы блоков, внутри которых этого делать не нужно. Используйте, если после подгрузки контента картинки в блоке пропадают или «моргают».

js-quickview

Что плагин не трогает сам

  • Картинки и iframe внутри <script> и <noscript>.
  • Картинки с атрибутом data-lazyload="false".
  • Всё, что находится вне витрины приложения «Магазин».
Просмотр изображения
Оригинал