Question

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 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.

Answer 1

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