Javascript Rails引导转盘缓慢加载_Javascript_Jquery_Css_Ruby On Rails_Twitter Bootstrap

Javascript Rails引导转盘缓慢加载

javascript jquery css ruby-on-rails twitter-bootstrap

Javascript Rails引导转盘缓慢加载,javascript,jquery,css,ruby-on-rails,twitter-bootstrap,Javascript,Jquery,Css,Ruby On Rails,Twitter Bootstrap,我使用Rails和bootstrap构建了一个攻击库（存储在数据库中）这是一个引导旋转木马，在页面左侧第3页有一个攻击名称的垂直列表，可以单击该列表在内部旋转木马中显示有关该攻击的更多信息。内部旋转木马是一个可垂直滚动的，控制着页面的其余部分。“更多信息”部分嵌入了youtube视频、图像、描述，并将提供更多信息目前有超过100个，它们都是一次加载的，不用说速度非常慢。我想知道是否有一种方法可以轻松地“惰性加载”整个内部旋转木马我一直在考虑这样的解决方案：但就youtuble视频和其他

我使用Rails和bootstrap构建了一个攻击库（存储在数据库中）

这是一个引导旋转木马，在页面左侧第3页有一个攻击名称的垂直列表，可以单击该列表在内部旋转木马中显示有关该攻击的更多信息。内部旋转木马是一个可垂直滚动的，控制着页面的其余部分。“更多信息”部分嵌入了youtube视频、图像、描述，并将提供更多信息

目前有超过100个，它们都是一次加载的，不用说速度非常慢。我想知道是否有一种方法可以轻松地“惰性加载”整个内部旋转木马

我一直在考虑这样的解决方案：

但就youtuble视频和其他信息而言，它并没有真正帮助我

下面是我的代码：

attack\u library.html.erb

<!DOCTYPE html>
<div class="section">
  <div class="container-fluid" id="lib_carousel_wrapper">
    <div id="attack_library_carousel" class="carousel" data-ride="carousel">
        <div class="col-xs-12 col-sm-4" id="lib_attack_col_wrapper">
            <div class="darkest_background  attack_lib_header">
                <h3>attack</h3>
            </div>


            <div id="custom-search-input">
                <div class="input-group col-md-12">
                    <input type="text" class="form-control input-lg" placeholder="Find an attack" />
                    <span class="input-group-btn">
                          <button class="btn btn-info btn-lg" type="button">
                             <i class="glyphicon glyphicon-search"></i>
                          </button>
                    </span>
                </div>
            </div>            


            <ul id="attack_library_list_group" class="list-group">
            <% @attacks.each_with_index do |attack,index| %>
              <% if index == 0 %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item active"><h4><%= attack.name%></h4></li>
          <% else %>
            <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item"><h4><%= attack.name%></h4></li>
          <% end %>
        <% end %>
            </ul>

        </div>
      <!-- Wrapper for slides -->
      <div class="col-xs-12 col-sm-8" id="lib_description_col_wrapper">
        <div class="darkest_background  attack_lib_header">
            <h3>Information</h3>
        </div>
        <div class="carousel-inner" id="carousel_inner_lib">
        <% @attacks.each_with_index do |attack,index| %>
        <% if index == 0 %>
          <div class="item active">
        <% else %>
          <div class="item">
        <% end %>
            <h1><%= attack.name%></h1>

            <h2>Description</h2>
            <p> <%= attack.description%></p>

            <h2>Video</h2>
            <iframe width="400" height="240" src="<%= attack.link%>" frameborder="0" allowfullscreen></iframe>

            <h2>image</h2>
            <%= image_tag("attack.jpg") %>

            <h2>Affected</h2>
            <p>Primary -  <%= attack.primary_affected%></p>
            <p>Secondary -  <%= attack.secondary_affected%></p>
            <p>Tertiary -  <%= attack.tertiary_affected%></p>

            <h2>Stats</h2>
            <p>Max: 540pts </p>
      <% end %> 
        </div><!-- End Carousel Inner -->
      </div>
    </div><!-- End Carousel -->
  </div>
</div>

class AttackssController < ApplicationController
  def library
    @attacks = Attack.all
  end
end

class AttackssController < ApplicationController
  def library
    @attacks = Attack.name
  end
end

<!DOCTYPE html>
<div class="section">
  <div class="container-fluid" >
    <div class="carousel" data-ride="carousel">
        <div class="col-xs-12 col-sm-4" id="ex_lib_attack_col_wrapper">             
           <ul class="list-group">
            <% @attack_names.each_with_index do |attack,index| %>
              <% if index == 0 %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item active"><h4><%= attack.name%></h4></li>
              <% else %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item"><h4><%= attack.name%></h4></li>
              <% end %>
            <% end %>
           </ul>

        </div>
      <!-- Wrapper for slides -->
      <div class="col-xs-12 col-sm-8" id="ex_lib_description_col_wrapper">
        <div class="carousel-inner" id="carousel_inner_ex_lib">
        <% @attack_names.each_with_index do |attack,index| %>
          <% if index == 0 %>
          <div class="item active" data-url="/attacks/show_library_attack/<%=attack.slug%>" data-slide-number="0">
          <% else %>
          <div class="item" data-url="/attacks/show_library_attack/<%=attack.slug%>">
          <% end %>

          </div><!-- End Item -->
      <% end %> 
        </div><!-- End Carousel Inner -->
      </div>
    </div><!-- End Carousel -->
  </div>
</div>

攻击\u controller.rb

<!DOCTYPE html>
<div class="section">
  <div class="container-fluid" id="lib_carousel_wrapper">
    <div id="attack_library_carousel" class="carousel" data-ride="carousel">
        <div class="col-xs-12 col-sm-4" id="lib_attack_col_wrapper">
            <div class="darkest_background  attack_lib_header">
                <h3>attack</h3>
            </div>


            <div id="custom-search-input">
                <div class="input-group col-md-12">
                    <input type="text" class="form-control input-lg" placeholder="Find an attack" />
                    <span class="input-group-btn">
                          <button class="btn btn-info btn-lg" type="button">
                             <i class="glyphicon glyphicon-search"></i>
                          </button>
                    </span>
                </div>
            </div>            


            <ul id="attack_library_list_group" class="list-group">
            <% @attacks.each_with_index do |attack,index| %>
              <% if index == 0 %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item active"><h4><%= attack.name%></h4></li>
          <% else %>
            <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item"><h4><%= attack.name%></h4></li>
          <% end %>
        <% end %>
            </ul>

        </div>
      <!-- Wrapper for slides -->
      <div class="col-xs-12 col-sm-8" id="lib_description_col_wrapper">
        <div class="darkest_background  attack_lib_header">
            <h3>Information</h3>
        </div>
        <div class="carousel-inner" id="carousel_inner_lib">
        <% @attacks.each_with_index do |attack,index| %>
        <% if index == 0 %>
          <div class="item active">
        <% else %>
          <div class="item">
        <% end %>
            <h1><%= attack.name%></h1>

            <h2>Description</h2>
            <p> <%= attack.description%></p>

            <h2>Video</h2>
            <iframe width="400" height="240" src="<%= attack.link%>" frameborder="0" allowfullscreen></iframe>

            <h2>image</h2>
            <%= image_tag("attack.jpg") %>

            <h2>Affected</h2>
            <p>Primary -  <%= attack.primary_affected%></p>
            <p>Secondary -  <%= attack.secondary_affected%></p>
            <p>Tertiary -  <%= attack.tertiary_affected%></p>

            <h2>Stats</h2>
            <p>Max: 540pts </p>
      <% end %> 
        </div><!-- End Carousel Inner -->
      </div>
    </div><!-- End Carousel -->
  </div>
</div>

class AttackssController < ApplicationController
  def library
    @attacks = Attack.all
  end
end

class AttackssController < ApplicationController
  def library
    @attacks = Attack.name
  end
end

<!DOCTYPE html>
<div class="section">
  <div class="container-fluid" >
    <div class="carousel" data-ride="carousel">
        <div class="col-xs-12 col-sm-4" id="ex_lib_attack_col_wrapper">             
           <ul class="list-group">
            <% @attack_names.each_with_index do |attack,index| %>
              <% if index == 0 %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item active"><h4><%= attack.name%></h4></li>
              <% else %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item"><h4><%= attack.name%></h4></li>
              <% end %>
            <% end %>
           </ul>

        </div>
      <!-- Wrapper for slides -->
      <div class="col-xs-12 col-sm-8" id="ex_lib_description_col_wrapper">
        <div class="carousel-inner" id="carousel_inner_ex_lib">
        <% @attack_names.each_with_index do |attack,index| %>
          <% if index == 0 %>
          <div class="item active" data-url="/attacks/show_library_attack/<%=attack.slug%>" data-slide-number="0">
          <% else %>
          <div class="item" data-url="/attacks/show_library_attack/<%=attack.slug%>">
          <% end %>

          </div><!-- End Item -->
      <% end %> 
        </div><!-- End Carousel Inner -->
      </div>
    </div><!-- End Carousel -->
  </div>
</div>

class AttacksController

当用户滚动到给定位置时，您可以简单地使用Ajax请求获取一定数量的攻击。比如说

Jquery

var itemPosition = $(".item").offset().top; 
var carouselPosition = $("#carousel_inner_lib").offset().top;
var difference = carouselPosition - itemPosition;

当

var difference

变量达到某个预设阈值（可能是50px）时，使用类似这样的Ajax请求

$.ajax({
    type: 'post',
    url: '/items/:offset',
    success: function(data){
      // append data to attacks list here and increment :offset.
    }
});

但请注意，您必须更新scroll上的所有元素位置。

为了加快速度，我最后做的是在内部旋转木马中渲染部分

攻击\u controller.rb

<!DOCTYPE html>
<div class="section">
  <div class="container-fluid" id="lib_carousel_wrapper">
    <div id="attack_library_carousel" class="carousel" data-ride="carousel">
        <div class="col-xs-12 col-sm-4" id="lib_attack_col_wrapper">
            <div class="darkest_background  attack_lib_header">
                <h3>attack</h3>
            </div>


            <div id="custom-search-input">
                <div class="input-group col-md-12">
                    <input type="text" class="form-control input-lg" placeholder="Find an attack" />
                    <span class="input-group-btn">
                          <button class="btn btn-info btn-lg" type="button">
                             <i class="glyphicon glyphicon-search"></i>
                          </button>
                    </span>
                </div>
            </div>            


            <ul id="attack_library_list_group" class="list-group">
            <% @attacks.each_with_index do |attack,index| %>
              <% if index == 0 %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item active"><h4><%= attack.name%></h4></li>
          <% else %>
            <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item"><h4><%= attack.name%></h4></li>
          <% end %>
        <% end %>
            </ul>

        </div>
      <!-- Wrapper for slides -->
      <div class="col-xs-12 col-sm-8" id="lib_description_col_wrapper">
        <div class="darkest_background  attack_lib_header">
            <h3>Information</h3>
        </div>
        <div class="carousel-inner" id="carousel_inner_lib">
        <% @attacks.each_with_index do |attack,index| %>
        <% if index == 0 %>
          <div class="item active">
        <% else %>
          <div class="item">
        <% end %>
            <h1><%= attack.name%></h1>

            <h2>Description</h2>
            <p> <%= attack.description%></p>

            <h2>Video</h2>
            <iframe width="400" height="240" src="<%= attack.link%>" frameborder="0" allowfullscreen></iframe>

            <h2>image</h2>
            <%= image_tag("attack.jpg") %>

            <h2>Affected</h2>
            <p>Primary -  <%= attack.primary_affected%></p>
            <p>Secondary -  <%= attack.secondary_affected%></p>
            <p>Tertiary -  <%= attack.tertiary_affected%></p>

            <h2>Stats</h2>
            <p>Max: 540pts </p>
      <% end %> 
        </div><!-- End Carousel Inner -->
      </div>
    </div><!-- End Carousel -->
  </div>
</div>

class AttackssController < ApplicationController
  def library
    @attacks = Attack.all
  end
end

class AttackssController < ApplicationController
  def library
    @attacks = Attack.name
  end
end

<!DOCTYPE html>
<div class="section">
  <div class="container-fluid" >
    <div class="carousel" data-ride="carousel">
        <div class="col-xs-12 col-sm-4" id="ex_lib_attack_col_wrapper">             
           <ul class="list-group">
            <% @attack_names.each_with_index do |attack,index| %>
              <% if index == 0 %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item active"><h4><%= attack.name%></h4></li>
              <% else %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item"><h4><%= attack.name%></h4></li>
              <% end %>
            <% end %>
           </ul>

        </div>
      <!-- Wrapper for slides -->
      <div class="col-xs-12 col-sm-8" id="ex_lib_description_col_wrapper">
        <div class="carousel-inner" id="carousel_inner_ex_lib">
        <% @attack_names.each_with_index do |attack,index| %>
          <% if index == 0 %>
          <div class="item active" data-url="/attacks/show_library_attack/<%=attack.slug%>" data-slide-number="0">
          <% else %>
          <div class="item" data-url="/attacks/show_library_attack/<%=attack.slug%>">
          <% end %>

          </div><!-- End Item -->
      <% end %> 
        </div><!-- End Carousel Inner -->
      </div>
    </div><!-- End Carousel -->
  </div>
</div>

class AttacksController


然后我用这些名称在左侧创建攻击列表，并将攻击名称保存在内部旋转木马中
attack\u library.html.erb
<!DOCTYPE html>
<div class="section">
  <div class="container-fluid" id="lib_carousel_wrapper">
    <div id="attack_library_carousel" class="carousel" data-ride="carousel">
        <div class="col-xs-12 col-sm-4" id="lib_attack_col_wrapper">
            <div class="darkest_background  attack_lib_header">
                <h3>attack</h3>
            </div>


            <div id="custom-search-input">
                <div class="input-group col-md-12">
                    <input type="text" class="form-control input-lg" placeholder="Find an attack" />
                    <span class="input-group-btn">
                          <button class="btn btn-info btn-lg" type="button">
                             <i class="glyphicon glyphicon-search"></i>
                          </button>
                    </span>
                </div>
            </div>            


            <ul id="attack_library_list_group" class="list-group">
            <% @attacks.each_with_index do |attack,index| %>
              <% if index == 0 %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item active"><h4><%= attack.name%></h4></li>
          <% else %>
            <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item"><h4><%= attack.name%></h4></li>
          <% end %>
        <% end %>
            </ul>

        </div>
      <!-- Wrapper for slides -->
      <div class="col-xs-12 col-sm-8" id="lib_description_col_wrapper">
        <div class="darkest_background  attack_lib_header">
            <h3>Information</h3>
        </div>
        <div class="carousel-inner" id="carousel_inner_lib">
        <% @attacks.each_with_index do |attack,index| %>
        <% if index == 0 %>
          <div class="item active">
        <% else %>
          <div class="item">
        <% end %>
            <h1><%= attack.name%></h1>

            <h2>Description</h2>
            <p> <%= attack.description%></p>

            <h2>Video</h2>
            <iframe width="400" height="240" src="<%= attack.link%>" frameborder="0" allowfullscreen></iframe>

            <h2>image</h2>
            <%= image_tag("attack.jpg") %>

            <h2>Affected</h2>
            <p>Primary -  <%= attack.primary_affected%></p>
            <p>Secondary -  <%= attack.secondary_affected%></p>
            <p>Tertiary -  <%= attack.tertiary_affected%></p>

            <h2>Stats</h2>
            <p>Max: 540pts </p>
      <% end %> 
        </div><!-- End Carousel Inner -->
      </div>
    </div><!-- End Carousel -->
  </div>
</div>

class AttackssController < ApplicationController
  def library
    @attacks = Attack.all
  end
end

class AttackssController < ApplicationController
  def library
    @attacks = Attack.name
  end
end

<!DOCTYPE html>
<div class="section">
  <div class="container-fluid" >
    <div class="carousel" data-ride="carousel">
        <div class="col-xs-12 col-sm-4" id="ex_lib_attack_col_wrapper">             
           <ul class="list-group">
            <% @attack_names.each_with_index do |attack,index| %>
              <% if index == 0 %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item active"><h4><%= attack.name%></h4></li>
              <% else %>
              <li data-target="#attack_library_carousel" data-slide-to="<%= index%>" class="list-group-item"><h4><%= attack.name%></h4></li>
              <% end %>
            <% end %>
           </ul>

        </div>
      <!-- Wrapper for slides -->
      <div class="col-xs-12 col-sm-8" id="ex_lib_description_col_wrapper">
        <div class="carousel-inner" id="carousel_inner_ex_lib">
        <% @attack_names.each_with_index do |attack,index| %>
          <% if index == 0 %>
          <div class="item active" data-url="/attacks/show_library_attack/<%=attack.slug%>" data-slide-number="0">
          <% else %>
          <div class="item" data-url="/attacks/show_library_attack/<%=attack.slug%>">
          <% end %>

          </div><!-- End Item -->
      <% end %> 
        </div><!-- End Carousel Inner -->
      </div>
    </div><!-- End Carousel -->
  </div>
</div>







将其传递给js。然后，我使用存储为数据url的名称在js中进行“加载”
 谢谢你的回答，但是我希望能够一次加载所有的名字，然后一次加载几个更多的信息部分。