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 show action:

galleries/show.html.erb

<div class="main">
  <div id="ajax-status"></div>
  <div id="gallery"><%= render(:partial => "galleries/show.js") %></div>
</div>

1.) My first attempt was to render a js partial:

galleries/_show.js.erb

<%= render('galleries/gallery').html_safe %>

The partial is loaded correctly but I don’t know if it’s here I have to add my spinner (and how to load it)

2.) My second attempt was to load the partial in my application.js file:

$  (document).ready(function(){

    // Setup Ajax Callbacks
    $  ('body').ajaxStart(function() {
        $  ('#ajax-status').show();
    });
        $  ('body').ajaxStop(function() {
        $  ('#ajax-status').fadeOut();
    });
    $  ('body').ajaxError(function (event, xhr, ajaxOptions, thrownError) {
            console.log("XHR Response: " +  JSON.stringify(xhr));
    });

    // load gallery
    $  ('#gallery').load('...'); # Can I load a partial here?

});

So Here I have my spinner working (I hope!) But as I see it’s not possible to load partial in that way..

Thanks a lot for your help, it would help me to understand a lot!

newest questions tagged jquery – Stack Overflow