How to show hundreds of images per view

Question

I am new at Rails and am having some trouble. I have a flashcard app and would like some advice about the design. Right now, the user chooses flashcards based on a subject; hundreds may be selected from the database. This controller action creates an instance variable, @show_flashcards, which is a large active record array of the flashcards. The user is redirected to a view page which has a slider controlled by the keyboard, and each flashcard in the @show_flashcards array is shown one at a time, accessed by

<% @show_flashcards.each do |flashcard| %>  
  <div class="front">
    <%= image_tag "#{flashcard.front}" %> 
    ...
    <% end %>

flascard.front accesses a string in the database which tells the view where to get the image in the asset pipeline.

The problem is that all of these images are loaded at once, slowing the app down. I am not sure how to address this problem. Perhaps 20 or so should be loaded at once? Any recommendations or guidance on how to implement this or a better solution? Thanks!

Answer 1

This doesn't really have much to do with Rails, it is the browser who fetches the images.

You should look at some javascript plugins for lazy loading images, such as http://www.appelsiini.net/projects/lazyload