Rails bootstrap輪播緩慢加載

我已經使用Rails和bootstrap構建了一個攻擊庫（存儲在數據庫中）。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

來源

2015-12-05 alex_milhouse

我最終做得如此之快，是在內部傳送帶內渲染部分內容。

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中執行「加載」。

來源

2016-01-26 06:18:40

那麼你可以簡單地使用Ajax請求來獲取一定數量的攻擊時，用戶滾動到給定的位置。例如

Jquery的

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

當var difference變量達到某一預設的閾值（也許50像素）使用像這樣Ajax請求。

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

但請注意，您將不得不更新滾動上的所有元素位置。

來源

2015-12-06 00:36:00 Zoheiry

感謝您的回答，但我希望能夠一次加載所有的名字，但一次加載更多的信息部分。 –

Rails bootstrap輪播緩慢加載

回答

相關問題