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

Александр
Александр
1,3K
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, но как это правильно сделать?

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

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

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

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

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

    Александр, ссылка на страницу 404 ведёт! Походу в этот раз я из велосипеда, планировал сделать вертолёт:)
  • Александр
    Александр
    2020-01-25 00:04:49
    Напрягает то, что loading=«lazy» работает как то не правильно, если с тем плагином при перезагрузке страницы в любом случае загрузиться только изображения которые в видимой части экрана а с встроенным lazy то загрузит все, то подгружает не по порядку, как то странно работает встроенное ноу-хау, честно говоря.
  • Александр
    Александр
    2020-01-25 00:41:21
    Решил использовать этот плагин lazysizes с ним всё работает отлично. Спасибо!
  • Александр Мальцев
    Александр Мальцев
    2020-01-26 07:26:29
    Да, это новая фишка, которая есть только в браузере Chrome и в других браузерах на основе проекта Chromium. Данный атрибут пока ещё в стандарт не внесён, это экспериментальная технология. Кто не хочет заморачиваться с js-скриптами, можно использовать.
  • Александр Мальцев
    Александр Мальцев
    2020-01-26 07:29:21
    Ссылку поправил. loading=«lazy» — это новая фишка, IE, Safari и Firefox — её не поддерживают.
  • Александр Мальцев
    Александр Мальцев
    2020-01-26 07:31:54
    Отлично! Мне lazysizes тоже нравится. У него звёзд на Github больше чем у других аналогичных проектов.
  • Александр
    Александр
    2020-01-26 19:22:58
    Александр, lazysizes мощная штука, спасибо за ссылку, разобрался практически со всем тем, что мне необходимо, но не могу найти информацию, как можно использовать lazysizes, только в определённом блоке где есть прокрутка, чтобы подгрузка происходила исключительно при прокрутке в этом блоке?
  • Александр Мальцев
    Александр Мальцев
    2020-01-27 14:30:15
    Попробуй использовать ключ container:
    var myLazyLoad = new LazyLoad({
        container: document.querySelector('#my-block')
    });
    
  • Александр
    Александр
    2020-01-27 20:38:46
    Спасибо! Александр, если изображения 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 и использовать скрипт для определённого блока, изображения в блоке просто не загружаются.
  • Александр Мальцев
    Александр Мальцев
    2020-02-02 16:16:30
    Можно сделать по-другому. Просто убрать у всех изображений класс 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>
    
  • Александр
    Александр
    2020-02-03 01:46:05
    Здравствуйте! Александр, огромное Вам спасибо! Всё работает.