1

我有一个带有一些悬停激活弹出窗口的数据表。这些弹出窗口只是初始设置的div元素position: absolute；display: none几行 JavaScript 然后根据鼠标悬停隐藏或显示它们。每个弹出窗口都附有一个浮动线图。

这工作得很好而且很快，除了一个障碍。Flot 有一个错误，当图形是这样的弹出窗口的一部分时，它会导致 x 轴和 y 轴标签在左下角重叠。简而言之，解决方案是在生成图形之前显示包含的 div。

我尝试了一个解决方案，在该解决方案中，我display: none从每个弹出 div 的 CSS 中消除了初始值。我还消除了background-color和border样式元素，有效地使这些 div 不可见。然后一些简单的 jQuery 生成图形并为这些弹出窗口做适当的 CSS 样式（设置背景颜色、边框等）。这在功能上有效。图形标签现在已正确定位。但它很慢。它很容易将页面的加载时间增加三倍，这是不可接受的。

只需添加display: none回弹出 div 的初始 CSS 即可解决所有性能问题。所以jQuery代码本身不能成为瓶颈。但这当然会导致标签格式再次混乱。

有谁知道如何克服这个问题？

4

2 回答 2

1

正如您所发现的，Flot 必须绘制到附加到 DOM 的 div 中。没有例子我不能肯定地说，但我猜你的缓慢性能可能是由于 div，即使它们没有内容，仍然在屏幕上，所以你正在触发重绘每当您更改它们时。

无需隐藏背景和边框，只需将 div 绝对定位到远离屏幕的位置，例如top:-9999px; left:-9999px. 这样它仍然处于布局中，因此 Flot 可以进行测量，但浏览器足够智能，不会在屏幕外重新绘制某些内容。

于 2013-10-01T02:47:24.733 回答
0

我通过将每个图形的生成推迟到初始相应的鼠标悬停事件被触发来解决了这个问题。我还必须最初将包含 div 的 z-index 设置为 -1，然后在生成图形时将其更改为 1；否则，不可见的 div 会“掩盖”其他页面内容，从而无法在生成图表之前单击 div“后面”的链接。

于 2013-10-01T19:09:29.300 回答