Sunrise23
@Sunrise23

Как выполнить действии при обнаружении добавления нового элемента dom?

Здравствуйте! Использую fancybox для галереи, то есть когда мне необходимо открыть изображение на весь экран, fancybox открывает его в модальном окне, создавая прям над закрывающим тегом body div с id "fancybox", в котором лежит эта увеличенная картинка (надеюсь доходчиво объяснил)
Так вот, мне надо создать функцию, которая будет отслеживание появление id fancybox и как только он появится, выполнять нужное мне действие, а именно добавлять стиль другим элементам.

В JS не селен, вот только-только начал изучать и вот что сделал:
var rigth = document.getElementById("icross_bar");
var imgBottom2 = document.getElementsByTagName('section')[0];

document.addEventListener("mousemove", changeColor, false);

function changeColor() {
if (document.getElementById('fancybox')) {
imgBottom2.style.animation = "blur 1s paused";
} else {
imgBottom2.style.animation = "none";

}
}


Если на странице обнаруживается id fancybox, то выполняется условие, так как в данном случае проверка пройдет один раз при запуске скрипта, а мне надо, чтобы он постоянно проверял (так как фото могут в любой момент открыть), то я поместил это в addEventListener с атрибутом "mousemove", таким образом заставим постоянно проверять наличие Id

Можете ли вы предложить код получше? Большое спасибо!
  • Вопрос задан
  • 167 просмотров
Решения вопроса 2
@dmz9
обычно нормальные разработчики нормальных js плагинов оставляют возможность работать с событиями, происходящими в их плагинах.
среди таких событий конкретно для всплывающих окон обычно есть
"перед началом открытия"
"после открытия"
и еще другие, но это как минимум.
зачем пытаться повешаться на мутацию дома, если можно воспользоваться встроеной возможностью фансибокса?
обработчики обычно вешаются во время инициализации в параметрах
fancyapps.com/fancybox
если юзаешь плагин который не имеет функционала событий на которые можно повешать свои обработчики - это решается очень просто использованием другого плагина, который имеет такой функционал в отличие от первого.
пролистай вниз, там 3 вкладки, нужна которая "callbacks"
вообще кстати неграмотно сделано, поиск по странице сразу не дает результатов, такое впечатление как будто функционал отсутствует, а на самом деле инфа в табах. юзабилити хромает у разрабов.
e3e9ca540d1b488c956ec721bc6e8090.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@furrya_black
Черт, а ведь видел такое в каком то опенсорсном движке, который вполне себе живой и используется в продакшене.

У вас на каждое движение мышкой по всей странице работает ваш function changeColor, который дергает со страницы элемент DOM'a, это очень плохо.

Дальше осмысливать код и цель кода я перестал. Серьезно, начните с мат части.
Не обижайтесь, но объяснить, как сделать лучше/правильно можно только если предварительно нагрузить вас основами.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы