5

我一直在努力获取这个座位映射图表并创建了一些迭代，我一直发现的问题是当我到达 IE8 时，平移会变慢和延迟。

此时我要减少加载时间的是创建一个 png 来替换我的“笔画”，因为我假设 ie8 每次拖动地图时都想重新渲染。

我还添加了控件，希望强制 IE8 用户使用此选项，但平移仍然存在延迟，如果我可以让使用 IE8（如果可能的话，还有 ie7）的用户仍然可以在没有控件的情况下拖动/平移，并且响应时间会更快一点那太好了。

这是我当前的 JSFiddle

我对 JS 还是有点陌生​​，所以如果您有任何建议，将不胜感激。（PS Chrome 框架很棒，但不适合我）

更新

我已经删除了原来的拖动功能，并使用jqueryui的可拖动功能替换了代码。Martin 建议只拖动 div，而不是 Raphael 元素。这样做可以让这个东西在 ie6-8 中飞行，这很棒，但后来我担心缩放。我之前在缩放时看到的我的纸元素 WxH 将保持相同的比例，当它放大时会切断我的绘图。在挖掘 Raphael 文档后，我遇到了 paper.setSize。setSize 正是我需要让这个项目在 ie6-8 中移动和优化并几乎征服其路径中的所有浏览器。

简而言之，使用 jqueryui 的可拖动和 paper.setSize 治愈了我的跨浏览器缩放 n' 泛蓝。

4

1 回答 1

3

从小提琴中可以看出，您正在通过在事件处理程序.translate()内部调用来触发图像的新渲染：mousemove

mapContainer.translate(currentMapPosX, currentMapPosY);
rsrGroupies.translate(currentMapPosX, currentMapPosY);

这种方法对所有浏览器的性能都是有害的，更不用说 IE8 了。在 IE8 中处理 VML 时，您应该考虑到图像中的每一次 DOM 更改都会导致图像再次被渲染。在平移时这样做总是会非常缓慢。

我看到您已经在 Fiddle 中使用了 jQuery。如果您想提高平移性能，您应该考虑执行以下操作：

  1. 对于当前缩放级别，仅在 Raphaël 中渲染一次图像。平移时不要尝试在任何时间点更改 VML/SVG 图像中的转换。
  2. 通过mousemove您已经拥有的平移实现，移动或滚动包含 VML/SVG 图像的 HTML 容器。想象一下<div>，overflow: hidden简单地把里面的图像相对移动，或者滚动到合适的位置。

这将需要对您的坐标计算进行一些调整，但它会提高您在所有浏览器中的性能。

于 2012-06-22T18:30:25.487 回答