Помощь LazyLoad самостоятельно (есть проблема)

[dsdscdscde]

Сделал LazyLoad для фото товаров в категориях по примеру google
Для просмотра ссылки Войди или Зарегистрируйся
работает идеально.
Но есть проблема с модулями infinite scroll и advanced search. При включении фильтра в advanced search или при нажатии на скролл infinite scroll картинки не грузятся совсем (вместо фото пустое место).

Как можно добавить поддержку lazyload в эти модули?
Пробовал добавлять js скрипт в модули но без результата.

та же проблема с infinite scroll если я просто устанавливаю модуль lazyload от bestkit

 

[t0wer]

Что-то делаете не так или не доделываете в коде. Lazyload без проблем встраивается в любой движок.
Почитайте сначала документацию и разберитесь

 

[dsdscdscde]

Что-то делаете не так или не доделываете в коде. Lazyload без проблем встраивается в любой движок.
Почитайте сначала документацию и разберитесь

у вас все работает с указанными мной модулями?

 

[t0wer]

Когда-то для одного заказчика было дело. Почитайте решение вопроса тут

 

[sol_los]

нужно выполнять инициализацию и загрузку lazyload каждый раз после выполнения ajax из тех модулей

 

[dsdscdscde]

нужно выполнять инициализацию и загрузку lazyload каждый раз после выполнения ajax из тех модулей

понял. можете сказать что конкретно нужно добавить в этот код?? очень поможете

document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;

const lazyLoad = function() {
if (active === false) {
active = true;

setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");

lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});

if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});

active = false;
}, 200);
}
};

document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});

 

[sol_los]

можете сказать что конкретно нужно добавить в этот код?? очень поможете

в данном случае этот вариант не очень подходит, иначе дублировать нужно эту хрень в каждом js модуля.
лучше всего использовать подключение библиотеки как в этой документации
Для просмотра ссылки Войди или Зарегистрируйся
<script src="Для просмотра ссылки Войди или Зарегистрируйся"></script>

далее инициализировать и запустить точно так, как в ней же указано:
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy"
});

if (lazyLoadInstance) {
lazyLoadInstance.update();
}

и уже после - в каждом js из модулей - найти блок который возвращает ajax и подгружает шаблон с товарами. только после его инициализации выполнить заново

if (lazyLoadInstance) {
lazyLoadInstance.update();
}

но это все в теории, нужно тестировать.

 

[dsdscdscde]

с модулем advanced search проблема решена, разработчики модуля предусмотрели возможность вставки кастомного кода в модуль, т.о. осталась проблема с infinite scroll, пробовал разные методы вставки lazy load, с этим модулем (infinite scroll) не работает ничего. кто нибудь может помочь с этим?

 

[dsdscdscde]

кто нибудь сможет подсказать что нужно сделать в модуле что бы это заработало?
код для lazy load такой:
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;

const lazyLoad = function() {
if (active === false) {
active = true;

setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");

lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});

if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});

active = false;
}, 200);
}
};

document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});

файлы js из модуля
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

нужна ваша помощь.

всем спасибо