Как дернуть скрипт, только когда определенный блок войдет в зону видимости?

Question

[Иван]

Есть некий блок с "id=drop-block". Блок изначально находится вне зоны видимости (справа от контента, за экраном). Чтобы блок показался используется скрипт, который передвигает его в зону видимости посредством смены классов.

В этот блок загружает приложение, которое инициализируется другим скриптом и подключается на страницу так:

<script src="my-app.js"></script>

Ну и вот вопрос, как сделать чтобы этот скрипт не загружался сразу, а только после того как на экране появится блок?

Вот скрипт смены классов блоков

<script>
		 $('div.f-chat').click(funcName);
		 $('div.button-on').click(funcName);
				  
		 function funcName() {
			$('.chat-200').toggleClass('chat-200 chat-200 chat-200-change');
			$('.text-r').toggleClass('text-r text-r visible');
			$('.text-t').toggleClass('text-t text-t invisible');
		}
    </script>

Comments

[Kovalsky]

https://jsfiddle.net/lucifer63/e3Lfoe2y/

Answer 1

[Андрей]

Intersercion Observer API

C jQuery в этом плане не знаком, наверняка тоже что-то есть.