Question

最近我需要在页面上附加大量的jQuery颜色选择器插件。使用边框，阴影，渐变等颜色输入，很快就会变成很多颜色。由于该工具重复加载了50多个元素，因此该页面将实例化500多个颜色选择器。毋庸置疑，浏览器遭遇了很长时间。

首先，我花了一些时间尝试使用不同的方法让所有输入共享一个颜色选择器的实例。在我看来，这将是最明智的做法。但是项目情况不允许我花费足够的时间来找到这样做的方法，所以我不得不想出一种替代技术。

我做了，我想听听你对我提出的技术的看法，以及是否有人发现任何问题？

这个想法是，不是在页面加载时附加插件的所有实例，而是等待，并且只需要附加所需的实例 - 就在您需要它们时。

以下是我实施该方法的方法。

首先，我有一些html包含很多很多输入，比如这个：

<input class="color">

然后，要将jQuery颜色选择器插件分配给这些输入，我通常会这样做：

jQuery(function($) {
    $('input.color').myColorPicker();
});

但是这会导致许多颜色选择器对象被立即实例化，每个匹配元素一个，每个匹配元素都可以在单击其输入时执行其操作。这通常可以正常工作，但如果有很多元素，它可能会使浏览器无响应。

相反，如果用户实际点击它，我现在就如何将颜色选择器附加到输入中。

jQuery(function($) {

/* Color pickers*/
$('input.color').live('focus', function(event){

// attach a colorpicker on an as needed basis,
// and only if it is not already attached
if(!$(this).hasClass('haspicker')){
    $(this).myColorPicker().addClass('haspicker');
}

}）;

当页面加载时，不附加颜色选择器。当用户单击带有'color'类的输入字段时，它首先获得焦点，并且拾取器插件被附加，并且该元素获得一个用于防止后续双重绑定的ectra类，然后click事件触发并触发出现的颜色选择器。

它工作正常，但我不确定这是不是一个好的做法，或者这个方法可能存在我未曾想过的潜在问题。

所以我想听听你的想法？

Answer 1

听起来很合理。另一个尝试是只有一个选择器实例onload，然后将它附加到焦点元素（我假设用户永远不需要两个并行选择器）。

即时附加jQuery插件以获得更好的性能

1 个答案: