开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜