Question

我正在创建一个Web应用程序，允许用户通过调整大小并在工作区内移动它们来操作图像。目前，我通过使用jQuery UI的Draggable和Resizable小部件来实现这一目标。每次用户将新图像添加到工作区时，我都会重新运行以下代码，如果有更有效的方法，我很乐意知道。

layers.draggable({
    containment: '#sig_workarea',
    stop: function (event, ui) {
        var id = wizard.findLayer(ui.helper.attr("id"));
        if (id) {
            wizard.layers[id].x = ui.position.left;
            wizard.layers[id].y = ui.position.top;
            wizard.history.setPoint();
        }
    }
});
images.resizable({
    aspectRatio: true,
    containment: "#sig_workarea",
    handles: 'se',
    stop: function (event, ui) {
        var id = wizard.findLayer(ui.helper.attr("id"));
        if (id) {
            wizard.layers[id].height = ui.size.height;
            wizard.layers[id].width = ui.size.width;
            wizard.history.setPoint();
        }
    }
});

我遇到的问题是应用程序运行缓慢，当移动图像时，运动不是很平滑。我的问题是，有没有办法以提供最佳性能的方式处理大约10-15个可拖动和可调整大小的小部件？

如果我遗漏了任何信息，或者您需要有关我的实施的更多详细信息，请询问。

提前致谢丹尼尔

Answer 1

我看不到任何导致发布代码中速度问题的内容，我想这是在代码中，没有发布。我怀疑它与事件有关。也许显示问题的jsFiddle会有所帮助，或者某些标记加上为图层和图像对象构建选择器的代码。以下是我学到的一些关于jQuery和UI的性能问题：

如果你真的需要，只绑定到mousemove事件，一旦你不再需要它就解除绑定（实际上对于所有类型的事件都是如此）
jQuery UI小部件应该在不再使用时销毁。使用.remove（）
启用的Firebug可能会大大减慢JS的速度

希望这会让你更接近错误。

使用多个小部件时jQuery UI性能问题

1 个答案: