jQuery UI performance issues when using multiple widgets
I am creating a web application that allows users to manipulate images by resizing and moving them inside a workspace. Currently I achieve this through the use of jQuery UI's Draggable and Resizable widgets. Each time the user adds a new image to the workspace I rerun the following code, if there is a more efficient way of doing this I would love to know.
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();
}
}
});
The issue I am having is that the application runs slowly and when moving the images the movement is not very smooth. My question is, is there any way to deal with around 10-15 draggable and resizable widgets in a way that provides optimal performance?
If I have left any information out or you require any more det开发者_高级运维ails about my implementation please just ask.
Thanks in advance Daniel
I can't see anything that causes the speed issues in the posted code, I guess it's in the code, that is not posted. I suspect it to be event related. Maybe a jsFiddle that shows the issue would help, or some markup plus the code where you build the selector for the layers and images objects. Here are some points that I learned are performance-cirtical regarding jQuery and UI:
- Only bind to mousemove events if you really need to, unbind as soon as you don't need it anymore (this is true for all kind of events actually)
- jQuery UI widgets should be destroyed when not used anymore. This is automatically done when removing it from the DOM with .remove()
- An enabled Firebug may slow down the JS a lot
Hope this leads you closer the error.
精彩评论