select2 css 加载时间过长答案

【问题标题】：select2 css takes too long to loadselect2 css 加载时间过长
【发布时间】：2012-11-01 03:37:34
【问题描述】：

我在我的网络应用程序搜索页面上使用漂亮的Select2 来选择多个字段。可以按公司/行业/学校搜索人员。因为每个都有数百个可搜索的值，所以加载正确的 select2 css 需要时间（大约 1 秒）。在漂亮的 select2 字段显示之前，可以看到旧的丑陋选择字段闪烁。附上两张显示转换的屏幕截图。

这是我的查看代码：

        <%= form_tag('', :method => :get) do %>
          <div class="row-fluid">  
            <div class="span4">
              <label>What industries have they worked in?</label>
                <%= select_tag "industry_ids", options_for_select((@visible_industries), params[:industry_ids]), { :placeholder => "Type to search...", :multiple => true, :id => "e3", :onchange => 'this.form.submit();' } %>
                <%= hidden_field_tag :&, params[:industry_ids] %>
            </div>
            <div class="span4">
              <label>What companies have they worked at?</label>
                <%= select_tag "company_ids", options_for_select((@visible_companies), params[:company_ids]), { :placeholder => "Type to search...", :multiple => true, :onchange => 'this.form.submit();' } %>
                  <%= hidden_field_tag :&, params[:company_ids] %>           
            </div>
            <div class="span4">
              <label>Where did they go to school?</label>
              <%= select_tag "school_ids", options_for_select((@visible_schools), params[:school_ids]), { :placeholder => "Type to search...", :multiple => true, :onchange => 'this.form.submit();' } %>
                <%= hidden_field_tag :&, params[:school_ids] %>
            </div>
            <div class="row-fluid">
          <% end %>
        </div>
      </div>

和控制器代码：

  def people
    @current_user = current_user

    @visible_positions = Position.where{ is_visible.eq('true') }
    @visible_educations = Education.where{ is_visible.eq('true') }

    @visible_companies = @visible_positions.order("LOWER(company)").all.map { |p| [ p.company, p.company ] }.uniq
    @visible_industries = @visible_positions.order("LOWER(industry)").all.map { |p| [ p.industry, p.industry ] }.uniq
    @visible_schools = @visible_educations.order("LOWER(school)").all.map { |e| [ e.school, e.school ] }.uniq

    @c = @visible_positions.where{company.in(my{params[:company_ids]})}.map(&:user_id)
    @i = @visible_positions.where{industry.in(my{params[:industry_ids]})}.map(&:user_id)
    @s = @visible_educations.where{school.in(my{params[:school_ids]})}.map(&:user_id)

    unless @c.empty? && @i.empty? && @s.empty?
      @users = User.find([@c,@i,@s].reject(&:empty?).reduce(:&))
    end

  end

最后，我的资产目录中有这个 javascript（除了 select2 css）：

$(document).ready(function(){

  $('select').select2({
    minimumInputLength: 1
  });
});

我能做些什么来防止这种闪烁的发生？谢谢。

【问题讨论】：

这是页面呈现的方式。我的建议是隐藏选择，直到页面完全加载（并应用 select2）。
在页面完全加载之前我将如何隐藏它们？谢谢！
在样式表中，添加input {display:none;} 规则以隐藏它们（尽管visibility:hidden 可能更好）。然后用 jQuery 覆盖该规则 $('input').css("display","inline");.

标签： css ruby-on-rails search jquery-select2

【解决方案1】：

我将发表我的评论作为答案，因为它解决了您的问题。

我的建议是隐藏选择，直到页面完全加载（并应用 select2）。

在样式表中，添加input {display:none;} 规则以隐藏它们（尽管visibility:hidden 可能更好）。然后用 jQuery 覆盖该规则 $('input').css("display","inline");.

【讨论】：