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

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

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个可拖动和可调整大小的小部件，从而提供最佳性能？

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

在此先感谢丹尼尔

来源

2011-06-17 Daniel Cannon

我看不到任何导致在发布代码的速度问题，我想这是在代码中，未公布。我怀疑它与事件有关。也许jsFiddle显示问题将有所帮助，或者一些标记加上您为图层和图像对象构建选择器的代码。这里有几点我才知道是关于jQuery和UI性能cirtical：

只有绑定到鼠标移动事件，如果你真的需要，尽快解除绑定，你不需要它了（这是真正的所有类型的事件实际上）
jQuery UI小部件应该在不再使用时销毁。这是从DOM与一个.remove（）启用
的萤火虫可以

希望这会导致你更接近的错误减慢JS很多取出时，它自动完成。

来源

2011-06-18 11:58:38

嗨，感谢您的回复。 –

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

回答

相关问题