Как вызвать событие, когда компонент становится видимым. Должен быть автономным

Question

Мне было интересно, если кто-нибудь знает способ вызвать событие, когда компонент становится видимым.

В моей ситуации у меня есть несколько вкладок на стороне клиента и некоторые компоненты под ними, которые должны знать, когда онистать видимым.Таким образом, они скрыты или показаны некоторым родительским контейнером.У меня нет контроля над этими вкладками, поэтому я не могу запустить событие, когда вкладки переключаются (я пишу отдельный компонент JSF, поэтому я не всегда могу предсказать, какое именно действие будет делать компонент видимым).

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

Спасибо!

Answer 1

Проведя дополнительные исследования и изучив код для плагина http://plugins.jquery.com/project/watch, я пришел к выводу, что во всех браузерах нет хорошего способа, основанного на событиях.

Итак, вместо этого мне пришлось прибегнуть к опросу.Мое решение включает проверку видимости компонента с помощью:

jQuery(this.id).is(":visible")

Если компонент виден, я запускаю свой тяжелый код JavaScript для компонента.Если он не виден, я запускаю процедуру каждые 200 мс, чтобы проверить, виден ли компонент.Таким образом, я буду знать, когда компонент станет первым видимым, чтобы я мог обработать его.

Поскольку объем кода, выполняемого каждые 200 мс, довольно мал (только проверка видимости, которая, я думаю, основана на ширине компонента тестирования == 0), это, похоже, работает довольно хорошо.

Итак, не такое крутое решение, как я надеялся, но, похоже, оно выполнило свою работу.

Answer 2

Я решаю эту проблему, вызывая событие resize из вкладки при каждом переключении вкладки:

window.dispatchEvent(new Event('resize'));

Вы также можете рассмотреть вопрос об увольнении scroll и / или visibilitychange.