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

我对jquery/ajax还不熟悉，我很难理解这些概念以及如何将其集成到Rails3应用程序中。我看了一些视频，但我不知道如何制作我想要的

我试图实现的是在“gallery”div（在gallers/show.html.erb中）中加载几个图像。我使用的是AmazonS3，完全加载这些图片需要一些时间。所以我认为在图像加载到背景中时添加一个微调器会更好

以下是我的代码：

画廊/show.html.erb

照片/_photo.html.erb

我的第一个想法是通过ajax渲染js片段（gallers/_show.js.erb），在加载图像时显示微调器，然后在完全加载图像时显示画廊

我很高兴知道这样做是否正确

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

我建议您：

$(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参数、选择正确图像并发送它们的能力。如果你想知道元素的数量，你可以做一个预调用来获取它，这样你就可以显示一个进度条。

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

首先，更改HTML结构：

galleries/show.html.erb（我使用类名，以防您希望在一个页面上有多个库）

现在是application.js中的js

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

---

非常感谢，我要研究一下。我最关心的是在这里设置一个正确的url，因为我认为在ruby中不能这样设置。它工作得很好，我只是根据我的需要对它做了一些更改（一个加载程序用于整个库）。唯一的问题是，有时（当我清理浏览器缓存时），它仍然会占用一些时间来加载图像（宽度：800px），这正常吗？不管怎样，它真的更快。非常感谢！

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

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

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

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

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