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

Александр, здравствуйте! Спасибо Вам! К сожалению по технической части работы плагина, не могу досконально всё описать, знаний маловато для этого, если простому, при загрузке страницы браузер загружает только те изображения, которые находятся в видимой части экрана, остальные подгружаются по мере их появления в поле видимости, тем самым увеличивается скорость загрузки страницы.

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

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

Александр, ссылка на страницу 404 ведёт! Походу в этот раз я из велосипеда, планировал сделать вертолёт:)

Напрягает то, что loading=«lazy» работает как то не правильно, если с тем плагином при перезагрузке страницы в любом случае загрузиться только изображения которые в видимой части экрана а с встроенным lazy то загрузит все, то подгружает не по порядку, как то странно работает встроенное ноу-хау, честно говоря.

Решил использовать этот плагин lazysizes с ним всё работает отлично. Спасибо!

Да, это новая фишка, которая есть только в браузере Chrome и в других браузерах на основе проекта Chromium. Данный атрибут пока ещё в стандарт не внесён, это экспериментальная технология. Кто не хочет заморачиваться с js-скриптами, можно использовать.

Ссылку поправил. loading=«lazy» — это новая фишка, IE, Safari и Firefox — её не поддерживают.

Отлично! Мне lazysizes тоже нравится. У него звёзд на Github больше чем у других аналогичных проектов.

Александр, lazysizes мощная штука, спасибо за ссылку, разобрался практически со всем тем, что мне необходимо, но не могу найти информацию, как можно использовать lazysizes, только в определённом блоке где есть прокрутка, чтобы подгрузка происходила исключительно при прокрутке в этом блоке?

Попробуй использовать ключ container:

var myLazyLoad = new LazyLoad({
    container: document.querySelector('#my-block')
});

Спасибо! Александр, если изображения 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 и использовать скрипт для определённого блока, изображения в блоке просто не загружаются.

Можно сделать по-другому. Просто убрать у всех изображений класс 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>

Здравствуйте! Александр, огромное Вам спасибо! Всё работает.