pdopage и vanilla-lazyload

Добрый день!
Подскажите как можно подружить pdopage и vanilla-lazyload (https://github.com/verlok/vanilla-lazyload)
Вызов pdopage стандартный

{'!pdoPage' | snippet: [
                'parents' => $_modx->resource.id,
            	'limit' => 12,
            	'includeTVs' => '',
            	'processTVs' => 1,
            	'tvPrefix' => '',
            	'tpl' => 'card',
            	'templates' => 4,
            	'ajax' => 1,
            	'ajaxMode' => 'scroll',
            	'ajaxElemWrapper' => '#list',
            	'ajaxElemRows' => '#list .row',
            	'ajaxElemPagination' => '#list .pagination',
            	'ajaxElemLink' => '#list .pagination a',
            	'ajaxElemMore' => '#list .btn-more',
            	'ajaxTplMore' => '@INLINE <div class="text-center"><button class="btn btn-primary btn-more">Загрузить еще</button></div>',
            	'frontend_css' => '',
            	'frontend_js' => '[[+assetsUrl]]js/pdopage.js'
            ]}
чанк card
<article>
	<a class="card transform-top" href="{$id | url}" title="{$menutitle}">
		<div class="card__header">
			<figure class="ratio ratio-16x9">
				<img class="lazy" data-src="{$preview_medium}" width="576" height="324" alt="{$menutitle}">
			</figure>
		</div>
		<div class="card__body">
			<h4 class="card__title">{$pagetitle}</h4>
		</div>
	</a>
</article>
Вызов js стандартный
document.addEventListener('DOMContentLoaded', () => {
	
	(function () {
        function logElementEvent(eventName, element) {
        	console.log(Date.now(), eventName, element.getAttribute("data-src"));
        }

        var callback_enter = function (element) {
        	logElementEvent("? ENTERED", element);
        };
        var callback_exit = function (element) {
        	logElementEvent("? EXITED", element);
        };
        var callback_loading = function (element) {
        	logElementEvent("⌚ LOADING", element);
			
        };
        var callback_loaded = function (element) {
        	logElementEvent("? LOADED", element);
        };
        var callback_error = function (element) {
        	logElementEvent("? ERROR", element);
        	element.src = "https://via.placeholder.com/440x560/?text=Error+Placeholder";
        };
        var callback_finish = function () {
        	logElementEvent("✔️ FINISHED", document.documentElement);
        };
        var callback_cancel = function (element) {
        	logElementEvent("? CANCEL", element);
        };

        var ll = new LazyLoad({
			callback_enter: callback_enter,
			callback_exit: callback_exit,
			callback_cancel: callback_cancel,
			callback_loading: callback_loading,
			callback_loaded: callback_loaded,
			callback_error: callback_error,
			callback_finish: callback_finish
        });
        
    })();

});
Первые 12 изображений грузит нормально при клике на кнопку загрузить еще изображения битые, так же если выбрать режим скролл

пробовал вызов добавить в pdopage.js использовал код
pdoPage.callbacks['after'] = function(config, response) {
    console.log('Конфиг после загрузки!', config);
    console.log('Ответ от сервера!', response);
}
и
$(document).on('pdopage_load', function(e, config, response) {
    console.log(e, config, response);
});
не работает
скорее всего не правильно js вызываю на обновление dom
pdoPage.callbacks['after'] = function(config, response) {
    lazyLoadInstance.update();
}
Майкл
20 января 2023, 00:35
modx.pro
1
835
0

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

Miša Bulic
20 января 2023, 01:07
0
$(document).on('pdopage_load', function () {
    lazyLoadInstance.update();
});
$(document).on('mse2_load', function () {
    lazyLoadInstance.update();
});
    Майкл
    20 января 2023, 01:24
    0
    К сожалению не работает ошибка
    Uncaught ReferenceError: lazyLoadInstance is not defined
        at HTMLDocument.<anonymous> ((index):337:5)
        at HTMLDocument.dispatch (jquery-3.6.3.js:5494:27)
        at elemData.handle (jquery-3.6.3.js:5298:28)
        at Object.trigger (jquery-3.6.3.js:8829:12)
        at HTMLDocument.<anonymous> (jquery-3.6.3.js:8907:17)
        at Function.each (jquery-3.6.3.js:385:19)
        at jQuery.fn.init.each (jquery-3.6.3.js:207:17)
        at jQuery.fn.init.trigger (jquery-3.6.3.js:8906:15)
        at Object.success (pdopage.js:196:25)
        at fire (jquery-3.6.3.js:3564:31)
      Miša Bulic
      20 января 2023, 10:55
      0
      Ну дак вы этот скрипт запускаете в самом конце? ну или defer'ы проверяйте.
      И стандартный вызов это вот так вроде:
      var lazyLoadInstance = new LazyLoad({
          elements_selector: ".lazy"
      
      });
      Опять же в самом конце страницы, после загрузки предыдущих скриптов
        Майкл
        20 января 2023, 13:09
        0
        да конечно все подключаю в самом конце
    Дмитрий Середюк
    20 января 2023, 09:58
    0
    Попробуйте этот вариант — github.com/aFarkas/lazysizes ранее была та же проблема, то после фильтрации то после пагинации нужно было перезапускать плагин lazy, а вот с этим все ок.
      Майкл
      20 января 2023, 13:10
      0
      Интересно, собирал все webpack-ом, не работает, а если загрузить скрипт отдельно все отлично работает
      <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>
      <script>
      var lazyLoadInstance = new LazyLoad({
          elements_selector: ".lazy"
      
      });
          $(document).on('pdopage_load', function () {
          lazyLoadInstance.update();
      });
      </script>
        Сергей
        15 мая 2024, 11:50
        0
        Немного дополню, для mSearch2 (может кому пригодится)
        <script>
                var lazyLoadInstance = new LazyLoad({
                    elements_selector: ".lazy"
                
                });
                    $(document).on('mse2_load', function () {
                    lazyLoadInstance.update();
                });
            </script>
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        7