3

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

您可以在此视频中看到：grister 问题视频

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

提前致谢 ！

4

3 回答 3

8

根据我自己的经验，罪魁祸首是使用autogenerate_stylesheet设置。问题是它会在每次调用时重新生成 css add_widget()，这绝对会杀死浏览器。此外，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_rowsand的任何值max_cols。

好处是通过手动生成样式表，您也完全避免了重复的样式错误。

指数级的放缓将会消失。快乐的网格化。

于 2013-11-08T05:05:17.320 回答
5

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

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

通过确保它们是整数，我设法加快了加载速度。

于 2014-08-07T14:54:06.980 回答
1

修复它的最佳方法不是禁用自动生成的样式表，而是在 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);
};

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

于 2014-05-22T09:15:42.077 回答