Question

我想在我的网站上使用Gridster，但我需要使用“add_widget”命令添加许多小部件。我做了一个测试，我认为“add_widget”函数存在问题：网格越来越慢，内存泄漏。

您可以在此视频中看到：grister problem video

但是，正如您在视频中看到的那样，如果我在开头添加小部件（不是使用add_widget函数），则没有问题。你能帮助我吗？我的代码出了什么问题？

提前致谢！

Answer 1

根据我自己的经验，主要罪魁祸首是使用autogenerate_stylesheet设置。问题是它在每次调用add_widget()时重新生成css，这绝对会杀死浏览器。此外，gridster有一个错误，其中样式表被复制，填充<head>大量的重复样式规则，使其在浏览器上很难（这个错误据说是修复的，但我的经验是修复只能在具体情况，绝对不是我的。）

当我使用gridster时，我的小部件总是大小相同。所以，在我的情况下，我能够生成样式表一次，从不需要重新生成它。

我不认为它是公共API的一部分，但你可以手动调用generate_stylesheet()方法。

var gridster = $(".gridster ul").gridster({
    autogenerate_stylesheet: false,
    widget_base_dimensions: [140, 140],
    //other options...
}).data('gridster');

gridster.generate_stylesheet({rows: 30; cols: 8});

//freely call gridster.add_widget(...); as many times as you like

由于您只需要生成样式表一次，因此您需要确保gridster将为足够的行和列生成样式规则以容纳所有窗口小部件，否则一旦超出范围，您将体验到破坏的布局。调用generate_stylesheet(opts)时，只需在行和列上提供上限。如果不这样做，它似乎默认为您的gridster实例用于max_rows和max_cols的任何值。

最好的方法是手动生成样式表，这样你就完全避免了重复的样式错误。

指数减速将会消失。快乐的格栅。

Answer 2

我知道我在这方面有点迟，但我遇到了同样的问题，上述解决方案都没有。

但是，我发现我将小部件的大小和坐标生成为字符串而不是后端的整数。

通过确保它们是整数，我设法加快了负荷。

Answer 3

修复它的最佳方法，不是禁用自动生成的样式表，而是编辑jquery.gridster.js中的fn.generate_stylesheet函数

在函数结束时，就在这些行之前：

    return this.add_style_tag(styles);
};

添加以下行：

this.remove_style_tags();

最终结果如下：

    this.remove_style_tags();
    return this.add_style_tag(styles);
};

这样，每次生成样式表时，都会删除前一个样式表，因此不存在重复问题！

Gridster add_widget很慢

3 个答案: