个人中心
gpt4 book ai didi

javascript - Rails bootstrap 轮播加载缓慢

转载 作者：行者123 更新时间：2023-11-28 06:44:34 25 4
gpt4 key购买 nike

我已经使用 Rails 和 bootstrap 构建了一个攻击库(存储在数据库中)。

这是一个 Bootstrap 轮播，在页面的左侧第三页有一个垂直的攻击名称列表，可以单击它以在内部轮播中显示有关该攻击的更多信息。内部轮播是垂直滚动的，占据了页面的其余部分。更多信息部分嵌入了 youtube 视频、图像、说明，并将提供更多信息。

目前有超过 100 个，它们都是同时加载的，不用说它 super 慢。我想知道是否有一种方法可以轻松地“延迟加载”整个内部传送带。

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

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>

攻击.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

最佳答案

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

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

关于javascript - Rails bootstrap 轮播加载缓慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34112224/

25 4 0
文章推荐： javascript - 使用 Chart.renderer.text 渲染表格
文章推荐： javascript - 调用 javascript 警报并重定向 url 问题
文章推荐： javascript - 将 Javascript 变量移入 Html 表
文章推荐： c++ - 根据对象的成员函数从 vector 中删除对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com