【发布时间】：2015-12-05 23:34:37
【问题描述】：
我使用 Rails 和 bootstrap 构建了一个攻击库（存储在数据库中）。
它是一个引导轮播，在页面的左 3 号有一个攻击名称的垂直列表，可以单击该列表以在内部轮播中显示有关该攻击的更多信息。内部轮播是一个垂直可滚动的，主宰页面的其余部分。更多信息部分已嵌入 youtube 视频、图像、说明，并将提供更多信息。
目前有超过 100 个，它们都同时加载，不用说它非常慢。我想知道是否有一种方法可以轻松地“延迟加载”整个内部旋转木马。
我一直在寻找这样的解决方案：
http://purelywebdesign.co.uk/tutorial/lazy-load-images-in-a-rails-application/
但就 youtube 视频和其他信息而言，它并没有真正帮助我。
下面是我的代码：
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
【问题讨论】：
标签： javascript jquery css ruby-on-rails twitter-bootstrap