Question

我使用Rails和bootstrap来构建攻击库（存储在数据库中）。

它是一个引导程序轮播，在页面的左边第3页有一个垂直的攻击名单列表，可以点击这些名称以在内部轮播中显示有关该攻击的更多信息。内部轮播是垂直可滚动的，占据页面的其余部分。更多信息部分已嵌入YouTube视频，图像，说明，并将有更多信息。

目前有超过100个，它们都会立刻加载，不用说它是超慢的。我想知道是否有办法轻松地“懒惰”整个内部轮播。

我一直在寻找这样的解决方案：

http://purelywebdesign.co.uk/tutorial/lazy-load-images-in-a-rails-application/

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

下面是我的代码：

attack_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>

attack.js

$( document ).ready(function() {
    var clickEvent = false;
      $('#attacks_library_carousel').carousel({
          interval:  0  
      }).on('click', '.list-group li', function() {
              clickEvent = true;
              $('.list-group li').removeClass('active');
              $(this).addClass('active');       
      }).on('slid.bs.carousel', function(e) {
          if(!clickEvent) {
              var count = $('.list-group').children().length -1;
              var current = $('.list-group li.active');
              current.removeClass('active').next().addClass('active');
              var id = parseInt(current.data('slide-to'));
              if(count == id) {
                  $('.list-group li').first().addClass('active');   
              }
          }
          clickEvent = false;
      });

});

attacks_controller.rb

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

Answer 1

当用户滚动到给定位置时，您可以简单地使用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.
    }
});

但请注意，您必须更新滚动中的所有元素位置。

Answer 2

我最终做的就是快速完成这项工作，在内部旋转木马内部渲染部分内容。

<强> attacks_controller.rb

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

然后我创建了使用名称来创建左侧的攻击列表，并在内部轮播中保存攻击的名称。

<强> attack_library.html.erb

<!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中执行“加载”。

Rails bootstrap carousel慢慢加载

2 个答案: