Bitrix & Lazy Load Images и Асинхронная подгрузка контента?

Question

[Yuriy]

Через OnEndBufferContent всем тегам <img src заменил на <img data-src

в JS возвращаю обратно src после загрузки. Всё норм работает, подгрузка по scroll и resize не нужна. Но вот появились 2 проблемы
1. На сайте есть подгружаемый контент типа Ajax, это и блоки товаров и сама корзина и другие, соответственно там data-src через JS уже не меняется, как быть в этом случаи с асинхронной загрузкой контента ? Может есть событие у Bitrix после выполнения Ajax? пробовал это

BX.addCustomEvent('onAjaxSuccess', function () { console.log("test onAjaxSuccess"); })

не срабатывает...

2. Есть блоки картинок, слайдеры, фоны и тд. у них картинки идут фоном style="background-image:" как быть с этим моментом? так же дописывать style="data-background-image:" или вообще вырезать это свойство и засовывать в атрибут тегу? типа

<div style="background-image:url(...) ..."   --->   <div data-background-image="src.url" ?

Answer 1

[dcode]

1) OnEndBufferContent срабатывает при ajax запросах. По крайней мере в стандартных шаблонах битрикса, как и событие onAjaxSuccess (Вы можете поставить любое демо решение из коробки и протестировать). При этом первым же аргументом в onAjaxSuccess попадает результат запроса. Если этого всего не происходит, используется не BX.ajax.

2) А это целиком и полностью зависит от плагина, который вы используете для ленивой загрузки.

Comments

[Yuriy]

1. да срабатывает, но походу не везде... в открытии корзины FLY у ASPRO.NEXT хоть и подгружается контент через AJAX событие onAjaxSuccess не фурыкает... пришлось JS ASPRO подправить немного.

2. плагины не использую, для background сделал так:

[].forEach.call(document.querySelectorAll('[data-background-image]'), function(img) {
        console.log(img);
      img.setAttribute('style', 'background-image:url('+img.getAttribute('data-background-image')+') !important');
    });