当组件可见时如何触发事件。必须自给自足答案

【问题标题】：How to trigger an event, when component becomes visible. Must be self-contained当组件可见时如何触发事件。必须自给自足
【发布时间】：2011-07-18 12:47:02
【问题描述】：

我想知道是否有人知道在组件变得可见时触发事件的方法。

在我的情况下，我有一堆客户端选项卡和它们下面的一些组件，需要知道它们何时变得可见。因此，它们被某些父容器隐藏或显示。我无法控制这些选项卡，因此在切换选项卡时无法触发事件（我正在编写一个独立的 JSF 组件，因此我无法始终预测使组件可见的确切操作是什么）。

所以，这个解决方案必须是自包含在我的组件中的。有没有办法让我的组件确定它是由于父容器中的一些变化而变得可见？

【问题讨论】：

标签： javascript jsf dom-events visibility

【解决方案1】：

在做了更多研究并查看了http://plugins.jquery.com/project/watch 插件的代码后，我得出的结论是，在所有浏览器中都没有基于事件的好的方法来执行我需要的操作。

因此，我不得不求助于投票方式。我的解决方案包括检查组件的可见性：

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

如果组件可见，我会为组件运行繁重的 JavaScript 代码。如果它不可见，我每 200 毫秒运行一次例程以检查组件是否可见。这样我就可以知道一个组件什么时候第一次可见，所以我可以处理它。

由于每 200 毫秒执行的代码量非常小（只是可见性检查，我认为这是基于测试组件宽度 == 0），这似乎表现得很好。

因此，解决方案没有我希望的那么酷，但它似乎可以完成工作。

【讨论】：

顺便说一句，这也是一篇很有教育意义的文章，所以我应该包括它：west-wind.com/weblog/posts/478985.aspx
伙计，这不是我所希望的答案。你有没有想出更好的解决方案？我有完全相同的情况，用户控件中有一个谷歌地图——在它可见之前无法初始化它。（至少，不正确）

【解决方案2】：

我通过在 tabstrip 切换标签时触发 resize 事件来解决这个问题：

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

您也可以考虑解雇scroll 和/或visibilitychange。

【讨论】：