How to load a gallery content after images are loading in the background

I am new to jquery/ajax stuff and I have really hard time trying to understand the concepts and how to integrate it into a rails 3 application. I saw some screencasts but I can't figure how I can make what I want.

What I am trying to achieve is to load in a "gallery" div (in galleries/show.html.erb) several images. I am using Amazon S3 and it takes a bit of time to load these images fully. So I thought adding a spinner while images're loading in the background could be nicer.

Here is my code sor far:

galleries/show.html.erb

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

photos/_photo.html.erb

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

My first idea is to render a js 开发者_JAVA百科partial (galleries/_show.js.erb) through ajax where while images are loaded it displays a spinner then when there are fully loaded it displays the gallery.

I would be pleased to know if it's the right way to do it

Thanks a lot for your help and your guidelines.

Ajax won't have the effect that you want. However, it is easier to use a pure css and jquery solution.

First, change your HTML structure:

galleries/show.html.erb (I use class names in case you want to have multiple galleries on a page).

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

photos/_photo.html.erb (spinner for each image)

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

Next the css...

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

Now the js in application.js

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

I propose you this:

$(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();           
        });     
    };

});

note: elementsLoaded = $('#gallery .elements') ".elements" is the selector that counts how many images you have, it is surely a div, or got a specific class name. alternativly you can do something like

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

Moreover, this code relies on your rb backend ability to read the "startFrom" get parameter, select the correct images, and send them. If you want to know the number of elements, you can do a precall to fetch it, so you can display a progress bar.