Question

我是jquery / ajax的新手，我很难理解这些概念以及如何将它集成到rails 3应用程序中。我看过一些截屏视频，但我无法想象如何制作出我想要的东西。

我想要实现的是在“gallery”div（在galleries / show.html.erb中）加载几个图像。我正在使用Amazon S3，它需要一些时间来完全加载这些图像。所以我想添加一个微调器，而图像在后台加载可能会更好。

这是我的代码：

画廊/ show.html.erb

<div class="main">
  <div id="ajax-status"></div>
  <div id="gallery"><%= render @gallery.photos %></div>
</div>

照片/ _photo.html.erb

<section class="image">
  <%= image_tag photo.image_url %>
</section>

我的第一个想法是通过ajax渲染一个js partial（galleries / _show.js.erb），当加载图像时它会显示一个微调器，然后当完全加载时它会显示画廊。

我很高兴知道这是否是正确的方法

非常感谢您的帮助和指导。

Answer 1

我建议你：

$(document).ready(function(){

    // Setup Ajax Callbacks
    $('body').ajaxError(function (event, xhr, ajaxOptions, thrownError) {
        console.log("XHR Response: " +  JSON.stringify(xhr));
    });

    // load gallery
    var url = 'yourUrl.rb';
    var elementsLoaded = 0;
    $('#ajax-status').show();
    load();

    function load () {
        $.get(url, {startFrom: elementsLoaded+1}, function(data) {
            if ($(data).length) {
                $('#gallery').append(data);
                elementsLoaded = $('#gallery .elements').length;
                load();
            }
            else $('#ajax-status').fadeOut();           
        });     
    };

});

注意：elementsLoaded = $('#gallery .elements')“.elements”是一个选择器，用于计算您拥有的图像数量，它肯定是一个div，或者是一个特定的类名。或者你可以做一些像

这样的事情

elementsLoaded += $('.elements', data).length;

此外，此代码依赖于您的rb后端能力来读取“startFrom”get参数，选择正确的图像并发送它们。如果你想知道元素的数量，你可以预先取得它，这样你就可以显示一个进度条。

Answer 2

Ajax不会产生你想要的效果。但是，使用纯css和jquery解决方案更容易。

首先，更改HTML结构：

galleries / show.html.erb（如果你想在一个页面上拥有多个画廊，我会使用类名。）

<div class="main">     
  <div class="gallery">
      <%= render @gallery.photos %>
  </div>
</div>

photos / _photo.html.erb（每个图片的微调器）

<div class="image_frame">
  <%= image_tag "images/loading-spinner.gif", :class => "spinner" %>   
  <%= image_tag photo.image_url, :class => "gallery_photo" %>
</div>

接下来的css ......

.gallery .image_frame img.gallery_photo {
  display: none;
}

现在是app.js中的js

$(function() {
  $('.gallery .image_frame img.gallery_photo').load(function() {
    $(this).show().siblings('.spinner').hide();
  });
});

如何在后台加载图像后加载图库内容

画廊/ show.html.erb

照片/ _photo.html.erb

2 个答案: