0

我有一个包含许多图像的滑块。我想加载第一个图像，然后在页面加载完成后，用 Ajax 一个一个地加载其他图像。

如果滑块至少有两个图像，我想运行它。如果加载了第三个图像，它将附加到其他图像，依此类推，除非所有图像都已加载。

我使用 Rails 3.2 和 jQuery。是否有意义？我怎样才能做到这一点？

pages_controller.rb
def show
  @slider_items = @page.slider_items.where(:visible => true)
end

show.html.haml
%table.slider
  %tr
    - @slider_items.each do |item|
      %td.si
        .slider_item= image_tag(item.slider_image)
4

1 回答 1

0

好的，我将假设您的滑块是某种需要表结构的 javascript 小玩意儿。因此，您必须弄清楚的第一件事是如何将行插入现有表中。

假设您在初始页面加载后生成以下 HTML，其中只有一个图像：

<table id='slider'>
  <tr>
    <td class='si'>
      <img.... >
    </td>
  </tr>
</table>

您需要能够通过 javascript 在该表中插入新行。我必须假设您此时正在使用 jquery。这是一些jQuery：

$('#slider:last-child').append("<tr><td>Hi!</td></tr>");

如果您使该 jquery 执行，则您的 DOM 将包含：

<table id='slider'>
  <tr>
    <td class='si'>
      <img.... >
    </td>
  </tr>
  <tr><td>Hi!</td></tr>
</table>

再次执行相同的 javascript，然后：

<table id='slider'>
  <tr>
    <td class='si'>
      <img.... >
    </td>
  </tr>
  <tr><td>Hi!</td></tr>
  <tr><td>Hi!</td></tr>
</table>

这是 jquery 代码的关键部分，但它在哪里，你如何使它正确？

好吧，调用该 jquery 代码需要在每次获取下一个图像的 AJAX 调用之后发生。因此，您必须解决的下一个问题是如何通过 AJAX 一次一个地遍历所有图像？

这将涉及要在浏览器中维护的 JavaScript 变量，该变量是所有图像的索引。至少，您必须在页面加载时捕获最大数量的图像。你可以这样做：

显示.html.erb：

<script type='text/javascript'>
  $(document).ready(function() {
    var maximage = <%= @maximage %>;
    var curimage = 0;
  });   
</script>

为了让它工作，你必须设置@maximage。

应用程序/控制器/pages_controller.rb：

class PagesController < ApplicationController
  before_filter :prep_images , :only => [:show]
  def prep_images
    @maximage = @page.slider_items.length
  end
end

因此，当 dom 就绪事件触发时，由于 erb 扩展，您的 HTML 将包含一个脚本部分，其中包含：

var maximage = 12;
var curimage = 0;

假设有 12 张图像。

在这一点上，我不得不提到命名空间冲突，maximage 很可能是您使用的其他 javascript 库中使用的变量。如果您发现是这种情况，则必须解决此问题，但我假设没有冲突。

好的，我已经构建这篇文章有一段时间了。如果您认为我在正确的道路上，请告诉我，我将填写剩余的详细信息。

于 2012-09-19T01:43:53.517 回答