Замечательный Mutation Observer

MutationObserver очень заинтересовал меня для одного из сценариев ленивой загрузки модулей в javascript: когда какой-то модуль нужен только для работы с каким-то конкретным элементом, которого может не быть на странице изначально, но который может появиться впоследствии (как вариант, после какого-нибудь ajax запроса).

Это также может быть полезно, например, в блогах, когда в одних записях нужен какой-нибудь слайдер, в других фотогалерея, в третьих видеоплеер и так далее. И вместо того, чтобы заранее раздувать бандл всеми возможными вариантами, просто подгружаем необходимые модули в случае необходимости.

Вот такой набросок

function waitForSelectorOnce(selector) {
	return new Promise((resolve) => {
		let observer = null;
		let checker = () => {
			if (document.querySelector(selector)) {
				observer && observer.disconnect();
				resolve();
				return true;
			} else {
				return false;
			}
		};

		// проверяем, может быть селектор сразу имеется на странице
		// тогда и не надо инициализировать MutationObserver
		if (!checker()) {
			observer = new MutationObserver(checker);
			observer.observe(document.documentElement, {
				attributes: true,
				childList: true,
				subtree: true,
			});
		}
	});
}

waitForSelectorOnce(".gallery").then(() => import("./gallery"));
waitForSelectorOnce(".fotorama").then(() => import("./fotorama"));
waitForSelectorOnce("a[href$='.mp3']").then(() => import("./audio-player"));

Работает даже в ie 11.

По хорошему, надо еще использовать throttle. И промис тут скорее всего избыточен, можно просто передать коллбэк при вызове функции. Ну а вообще, это только набросок. Production ready код я никому не обещал.