在后台加载图像后如何加载图库内容 [英] How to load a gallery content after images are loading in the background

问题描述

我是jquery/ajax的新手，我真的很难理解这些概念以及如何将其集成到Rails 3应用程序中.我看到了一些截屏视频，但我不知道该如何制作自己想要的东西.

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.

我要实现的目标是在图库" div中(在galleries/show.html.erb中)加载几张图像.我正在使用Amazon S3，要完全加载这些图像需要花费一些时间.因此，我认为在背景中加载图像时添加微调器会更好.

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:

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

我的第一个想法是通过ajax渲染js局部(galleries/_show.js.erb)，在加载图片时，它会显示一个微调框，在完全加载时，它会显示图库.

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.

推荐答案

Ajax不会具有您想要的效果.但是，使用纯CSS和jquery解决方案会更容易.

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

首先，更改您的HTML结构:

First, change your HTML structure:

galleries/show.html.erb(如果您想在一个页面上有多个画廊，我会使用类名).

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(每个图像的旋转器)

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>

接下来的css ...

Next the css...

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

现在将application.js中的js

Now the js in application.js

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

这篇关于在后台加载图像后如何加载图库内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！