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

Тема в разделе "PrestaShop", создана пользователем dsdscdscde, 7 апр 2019.

Информация :
Приветствую гость, обрати внимание! Темы которые закреплены в разделах, в скором времени будут откреплены. Правила раздела PrestaShop

(Не актуальные темы) Каталоги:Модули PrestaShop 1.7Модули PrestaShop 1.5 - 1.6Шаблоны PrestaShop 1.7Шаблоны PrestaShop 1.5 - 1.6
(Не актуальные темы) Поиск / Запросы:Модули PrestaShop 1.7Модули PrestaShop 1.5 - 1.6Шаблоны PrestaShop 1.7Шаблоны PrestaShop 1.5 - 1.6
Полезная информация:Поддержка и помощь c PrestaShopУбираем ПрестаТраст, стучалки и прочую рекламуСовместные покупки модулей и шаблоновПеревод Prestashop и модулей
Модераторы: trace
  1. dsdscdscde

    dsdscdscde RD Нарушитель

    Заблокирован
    Регистр.:
    7 окт 2016
    Сообщения:
    270
    Симпатии:
    240
    Сделал LazyLoad для фото товаров в категориях по примеру google
    https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
    работает идеально.
    Но есть проблема с модулями infinite scroll и advanced search. При включении фильтра в advanced search или при нажатии на скролл infinite scroll картинки не грузятся совсем (вместо фото пустое место).

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

    та же проблема с infinite scroll если я просто устанавливаю модуль lazyload от bestkit
     
    Последнее редактирование: 7 апр 2019
  2. t0wer

    t0wer BlackHerald

    Регистр.:
    24 июн 2008
    Сообщения:
    744
    Симпатии:
    436
    Что-то делаете не так или не доделываете в коде. Lazyload без проблем встраивается в любой движок.
    Почитайте сначала документацию и разберитесь
     
  3. dsdscdscde

    dsdscdscde RD Нарушитель

    Заблокирован
    Регистр.:
    7 окт 2016
    Сообщения:
    270
    Симпатии:
    240
    у вас все работает с указанными мной модулями?
     
  4. t0wer

    t0wer BlackHerald

    Регистр.:
    24 июн 2008
    Сообщения:
    744
    Симпатии:
    436
    Когда-то для одного заказчика было дело. Почитайте решение вопроса тут
     
    dsdscdscde нравится это.
  5. sol_los

    sol_los

    Регистр.:
    17 окт 2011
    Сообщения:
    388
    Симпатии:
    235
    нужно выполнять инициализацию и загрузку lazyload каждый раз после выполнения ajax из тех модулей
     
    _sashok и dsdscdscde нравится это.
  6. dsdscdscde

    dsdscdscde RD Нарушитель

    Заблокирован
    Регистр.:
    7 окт 2016
    Сообщения:
    270
    Симпатии:
    240
    понял. можете сказать что конкретно нужно добавить в этот код?? очень поможете

    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);
    });
     
  7. sol_los

    sol_los

    Регистр.:
    17 окт 2011
    Сообщения:
    388
    Симпатии:
    235
    в данном случае этот вариант не очень подходит, иначе дублировать нужно эту хрень в каждом js модуля.
    лучше всего использовать подключение библиотеки как в этой документации
    https://github.com/verlok/lazyload
    <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.6/dist/lazyload.min.js"></script>

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

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

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

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

    но это все в теории, нужно тестировать.
     
    Belena27089, dsdscdscde и _sashok нравится это.
  8. dsdscdscde

    dsdscdscde RD Нарушитель

    Заблокирован
    Регистр.:
    7 окт 2016
    Сообщения:
    270
    Симпатии:
    240
    с модулем advanced search проблема решена, разработчики модуля предусмотрели возможность вставки кастомного кода в модуль, т.о. осталась проблема с infinite scroll, пробовал разные методы вставки lazy load, с этим модулем (infinite scroll) не работает ничего. кто нибудь может помочь с этим?
     
  9. dsdscdscde

    dsdscdscde RD Нарушитель

    Заблокирован
    Регистр.:
    7 окт 2016
    Сообщения:
    270
    Симпатии:
    240
    кто нибудь сможет подсказать что нужно сделать в модуле что бы это заработало?
    код для 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 из модуля
    https://yadi.sk/d/GJggjOnQT8kvVw
    https://yadi.sk/d/HJQnR8rBgqiIHg

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

    всем спасибо
     
    evgenij.sobolev нравится это.