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

Александр
Александр
965
12
Содержание:
  1. Комментарии
Александр, доброго вечера Вам! Пытаюсь сделать отложенную загрузку изображений, частично всё работает, но есть проблемы с mFilter2

Использую этот скрипт: github.com/malchata/yall.js/blob/master/dist/yall.min.js

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

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

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

    Попробуйте другие варианты.
    1. Для создания ленивых изображений без JavaScript можно выполнить простым добавлением к изображению атрибута loading=«lazy»:
    <img src="img.png" loading="lazy" alt="...">
    
    2. Использовать другой скрипт, например lazysizes.
    1. Александр
      Александр
      25.01.2020, 00:41
      Решил использовать этот плагин lazysizes с ним всё работает отлично. Спасибо!
      1. Александр Мальцев
        Александр Мальцев
        26.01.2020, 07:31
        Отлично! Мне lazysizes тоже нравится. У него звёзд на Github больше чем у других аналогичных проектов.
      2. Александр
        Александр
        25.01.2020, 00:04
        Напрягает то, что loading=«lazy» работает как то не правильно, если с тем плагином при перезагрузке страницы в любом случае загрузиться только изображения которые в видимой части экрана а с встроенным lazy то загрузит все, то подгружает не по порядку, как то странно работает встроенное ноу-хау, честно говоря.
        1. Александр Мальцев
          Александр Мальцев
          26.01.2020, 07:26
          Да, это новая фишка, которая есть только в браузере Chrome и в других браузерах на основе проекта Chromium. Данный атрибут пока ещё в стандарт не внесён, это экспериментальная технология. Кто не хочет заморачиваться с js-скриптами, можно использовать.
        2. Александр
          Александр
          24.01.2020, 23:25
          Александр, здравствуйте! Спасибо Вам! К сожалению по технической части работы плагина, не могу досконально всё описать, знаний маловато для этого, если простому, при загрузке страницы браузер загружает только те изображения, которые находятся в видимой части экрана, остальные подгружаются по мере их появления в поле видимости, тем самым увеличивается скорость загрузки страницы.

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

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

          Александр, ссылка на страницу 404 ведёт! Походу в этот раз я из велосипеда, планировал сделать вертолёт:)
          1. Александр Мальцев
            Александр Мальцев
            26.01.2020, 07:29
            Ссылку поправил. loading=«lazy» — это новая фишка, IE, Safari и Firefox — её не поддерживают.
            1. Александр
              Александр
              26.01.2020, 19:22
              Александр, lazysizes мощная штука, спасибо за ссылку, разобрался практически со всем тем, что мне необходимо, но не могу найти информацию, как можно использовать lazysizes, только в определённом блоке где есть прокрутка, чтобы подгрузка происходила исключительно при прокрутке в этом блоке?
              1. Александр Мальцев
                Александр Мальцев
                27.01.2020, 14:30
                Попробуй использовать ключ container:
                var myLazyLoad = new LazyLoad({
                    container: document.querySelector('#my-block')
                });
                
                1. Александр
                  Александр
                  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 и использовать скрипт для определённого блока, изображения в блоке просто не загружаются.
                  1. Александр Мальцев
                    Александр Мальцев
                    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>
                    
                    1. Александр
                      Александр
                      03.02.2020, 01:46
                      Здравствуйте! Александр, огромное Вам спасибо! Всё работает.
        Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.