Ленивая загрузка изображений в mFilter2

Александр
Александр
1.4K
12
Александр, доброго вечера Вам! Пытаюсь сделать отложенную загрузку изображений, частично всё работает, но есть проблемы с mFilter2 Использую этот скрипт: https://github.com/malchata/yall.js/blob/main/dist/yall.umd.js В шаблоне вызов такой:
<script src="/js/yall.min.js"></script></code><code><script>document.addEventListener("DOMContentLoaded", yall);</script>
В чанке mFilter2:
<img class="lazy" data-src="{$image}" alt="" width="200" height="150" />
При загрузке страницы и скроллинге вниз, изображения подгружаются, всё работает как нужно, но если воспользоваться фильтром в место изображений заглушка, картинки не грузятся пока не перезагрузишь страницу. Предполагаю, возможно нужно использовать событие mse2_load, но как это правильно сделать?

Комментарии: 12

  1. Александр Мальцев
    Александр Мальцев
    24.01.2020, 14:33
    Александр, добрый день!
    А как работает этот плагин? Первой строчкой вы его подключили, второй — инициализировали. А что вы хотите ещё прописать? Может он просто не обрабатывает динамический контент?

    Попробуйте другие варианты.
    1. Для создания ленивых изображений без JavaScript можно выполнить простым добавлением к изображению атрибута loading=«lazy»:
    <img src="img.png" loading="lazy" alt="...">
    
    2. Использовать другой скрипт, например lazysizes.
    1. Александр
      Александр
      24.01.2020, 23:25
      Александр, здравствуйте! Спасибо Вам! К сожалению по технической части работы плагина, не могу досконально всё описать, знаний маловато для этого, если простому, при загрузке страницы браузер загружает только те изображения, которые находятся в видимой части экрана, остальные подгружаются по мере их появления в поле видимости, тем самым увеличивается скорость загрузки страницы.

      Я предполагал что можно сделать чтобы он работал с динамическим контентом, приглянулся, весит копейки и в IE работает.

      Изначально использовал: loading=«lazy» и при тесте сделал ошибочный вывод, что он не работает с динамическим контентом, хотя сейчас посмотрел, всё работает, но есть минус, этот вариант не поддерживается IE, или я не прав?

      Александр, ссылка на страницу 404 ведёт! Походу в этот раз я из велосипеда, планировал сделать вертолёт:)
    2. Александр
      Александр
      25.01.2020, 00:04
      Напрягает то, что loading=«lazy» работает как то не правильно, если с тем плагином при перезагрузке страницы в любом случае загрузиться только изображения которые в видимой части экрана а с встроенным lazy то загрузит все, то подгружает не по порядку, как то странно работает встроенное ноу-хау, честно говоря.
    3. Александр
      Александр
      25.01.2020, 00:41
      Решил использовать этот плагин lazysizes с ним всё работает отлично. Спасибо!
    4. Александр Мальцев
      Александр Мальцев
      26.01.2020, 07:26
      Да, это новая фишка, которая есть только в браузере Chrome и в других браузерах на основе проекта Chromium. Данный атрибут пока ещё в стандарт не внесён, это экспериментальная технология. Кто не хочет заморачиваться с js-скриптами, можно использовать.
    5. Александр Мальцев
      Александр Мальцев
      26.01.2020, 07:29
      Ссылку поправил. loading=«lazy» — это новая фишка, IE, Safari и Firefox — её не поддерживают.
    6. Александр Мальцев
      Александр Мальцев
      26.01.2020, 07:31
      Отлично! Мне lazysizes тоже нравится. У него звёзд на Github больше чем у других аналогичных проектов.
    7. Александр
      Александр
      26.01.2020, 19:22
      Александр, lazysizes мощная штука, спасибо за ссылку, разобрался практически со всем тем, что мне необходимо, но не могу найти информацию, как можно использовать lazysizes, только в определённом блоке где есть прокрутка, чтобы подгрузка происходила исключительно при прокрутке в этом блоке?
    8. Александр Мальцев
      Александр Мальцев
      27.01.2020, 14:30
      Попробуй использовать ключ container:
      var myLazyLoad = new LazyLoad({
          container: document.querySelector('#my-block')
      });
      
    9. Александр
      Александр
      27.01.2020, 20:38
      Спасибо! Александр, если изображения css спрайтом и выводятся через класс, как в этом случае нужно сделать?

      Ниже пример, который работает и подгружается с обычными изображениями при прокрутке страницы,
      .lazyloaded.test1, .lazyloaded.test2, .lazyloaded.test2 {background-image: url(sprite.png);}
      
      .test1 {background-position: -5px -5px}
      .test2 {background-position: -39px -5px}
      .test3 {background-position: -73px -5px}
      
      <ul id="my-block">
      <i class="test1 lazyload"></i>
      <i class="test2 lazyload"></i>
      <i class="test3 lazyload"></i>
      </ul>
      
      но стоит только убрать класс: lazyload и использовать скрипт для определённого блока, изображения в блоке просто не загружаются.
    10. Александр Мальцев
      Александр Мальцев
      02.02.2020, 16:16
      Можно сделать по-другому. Просто убрать у всех изображений класс lazyload, а добавлять данный класс с помощью JavaScript только к тем изображениям, к которым нужно.
      Например:
      <ul id="my-block">
        <i class="test1"></i>
        <i class="test2"></i>
        <i class="test3"></i>
      </ul>
      
      <script src="/path/to/lazysizes.min.js"></script>
      <script>
      // выбираем элементы, к которым нужно добавить класс lazyload
      var elements = document.querySelectorAll('#my-block i');
      // добавляем ко всем этим элементам класс lazyload
      for (var i = 0, length = elements.length; i < length; i++) {
        elements[i].classList.add('lazyload');
      }
      </script>
      
    11. Александр
      Александр
      03.02.2020, 01:46
      Здравствуйте! Александр, огромное Вам спасибо! Всё работает.