Ленивая загрузка форм Б24 на сайте

Формы Б24 тянуть свои скрипты, которые загружают рекаптчу, которая загружает еще кучу всего (скрипты, стили, шрифты). И всё это добро загружается вместе со страницей. Надо отложить)

Для этого, подключение в коде нужно переделать на:

<script data-b24-form="click/3/triTri" data-src="https://b24.ru/upload/crm/form/loader_3_triTri.js" data-skip-moving="true"></script>

Так формы не будут загружаться, но у нас будут все необходимые данные: тип открытия формы, её ID и ссылка на скрипт. Далее добавляем скрипт ленивой загрузки:

// Ленивая загрузка форм Битрикс24
function loadB24Js(src, button = false) {
	let js = document.createElement('script');
	js.async = true;
	js.src = src + '?' + (Date.now() / 180000 | 0);
	document.getElementsByTagName('head')[0].appendChild(js);
	if (button) { // для data-b24-form^="click
		js.onload = function () {
			button.click();
		}
	}
}

let iObserver = new IntersectionObserver(function (entries) {
	if (entries[0].isIntersecting === true) {
		loadB24Js(entries[0].target.querySelector('script[data-b24-form][data-src]').dataset.src);
		iObserver.unobserve(entries[0].target); // перестаём отслеживать видимость
	}
}, {threshold: [0]}); // от 0 до 1, % видимой части элемента на экране

// инлайн формы загружаем при появлении на экране
document.querySelectorAll('script[data-b24-form^="inline"][data-src]').forEach(function (item) {
	iObserver.observe(item.parentNode);
});

// клик-формы при клике на кнопку
document.querySelectorAll('script[data-b24-form^="click"][data-src]').forEach(function (item) {
	item.nextElementSibling.addEventListener('click', function () {
		loadB24Js(item.dataset.src, this);
	}, {once: true});
});

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.