2

我在制作地图时遇到问题。我用桌子意识到了这一点，但是悬停太慢了。那么，您可以建议我使用哪些工具来解决我的问题？我应该使用画布吗？还有什么更好的方法 - 在客户端使用 json 生成地图还是在服务器上生成地图？

完整示例： http: //jsfiddle.net/MSpbW/3/（表是自动生成的）。

html:

<tbody>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
</tr>
</tbody>

js：

$(document).ready(

    function() {
        var color;

        $(".cell-hotel-empty").hover( function () {
            color = $(this).css('background');
            $(".cell-hotel-empty").css('background', '0');

        }, function() {
                $(".cell-hotel-empty").css('background', color);
        }
        )
    }
)
4

2 回答 2

0

Your JavScript hover bindings, mimic an effect that could be purely done in Css, yet with an optimized event queue, which is faster.

I am also not sure if your intended effect isn't actually highlighting each individual cell/pixel, as follows:

.cell-hotel-empty:hover{ 
            background:none; }
.cell-hotel-empty{
            background:#ccc; }

See this jsfiddle.

If you want to change the color of the entire block, just set

.cell-hotel-empty{
            background:transparent; }
table:hover { background: #0078a3;}

which is fast.

To answer your questions:

  • Whether the table should be generated on the server or client depends on parameters such as the connectivity and CPU of the target's audience web-appliances. If you require compatibility to older browsers, static markup output in your API is the way to go. Avoiding whole-page refreshes is favorable in most cases. Moreover mime-type based caching control may be easier to setup this way, in addition to the HTTP Header Cache-Control. Do not use this during your development/debugging though!

  • SVG would be a better option. It gives you the ease of ready-to-use DOM event binding, but a more lightweight DOM-tree, than is the case with HTML elements.
    Emulating an image-map based on hundreds to thousands of pixel-sized HTML elements, is never a good idea.

  • If your target audience has HTML5 compatible browsers with canvas enabled, using 2D canvas could be a good option at this point, depending on your further requirements. By using canvas you will have to take care of implementing mouse and event-handlers yourself. But there are ready-to-use libaries like KinectJS and Zebra.

  • Judging from your given example, a good option may be to listen to the mousemove event, within a boundary box condition based on the absolute position of your table intersecting with the mouse-coordinates. The mousemove-event contains within the target the hovered element. You may respond to the target only upon a certain idle timelimit in the millisecond range e.g. 10-30ms. See also this question.

  • Theoretically, you could use a 2D space partitioning technique like an qadtree, see this post on SO, and respond dynamically to events similar as you normally would, but with some overhead removed.

    enter image description here

于 2013-09-04T21:16:40.583 回答
0

您有大量的 td 具有类名 cell-hotel-empty，当您将鼠标移到（然后移出）它们时，每次都会触发事件处理函数，并且在处理函数中您再次选择所有带有“.cell-”的 td hotel-empty" 选择器，使 javascript 的事件队列膨胀并导致性能不佳。

性能不佳的另一个原因是，您试图模拟一个计算机屏幕（分辨率非常低），其中每个像素对应一个 DOM 对象（td's）。这会创建一个内存/cpu 怪物。

尝试将 mousemove 事件处理程序分配给它自己的表，然后计算悬停的单元格，然后在其上执行。

如果它对你来说太复杂了，那么为什么不使用 HTML5 画布技术呢？您甚至可以使用 kinetic.js 为您放置在画布中的形状分配事件。那会好很多。

于 2013-09-04T20:11:13.930 回答