rendering images dynamically

Hi,

I have a rails application where I respond to a request by fetching image urls from various web api calls and need to display them as they come available. I am able to display all the images once I get them all, but that causes an unacceptable delay for my user.

One approach I am trying is, from my controller, set an @image variable, and then pass in a block to the model that retrieves the image urls. In the block, I call      In the controller, I have:   @query.load_images! do |image|       @image = image       render :update do |page|         page.insert_html :bottom, 'images-div', :partial => 'images'       end     end

In my query model, I have:

def load_images! &block    for(some_loop_that_gets_one_image_at_a_time) do        image = get_next_image        block.call(image)    end end

In the _images.html.erb, I have:

<%=image_tag @image.url %>

The problem is that with this approach, I get a DoubleRenderError, and I think this is because render is being called multiple times in the block call within the loop.

What is the best way to get the effect I need (to load images one at a time as they become available)?

Thanks Anand

I tried a couple other approaches, but no success yet:

1. I reversed the blocks below - calling the load_images from within render :update - that did give me the results, but all at once in the end, not as the images show up. 2. I called redirect_to <controller/show_image?image_id=1 within the inner loop in 1, and created a show_image.js.rjs file which calls page.insert_html :bottom, 'images-div', :partial => 'image', but I get an error 'ActionView::MissingTemplate (Missing template <mycontroller>/ show_image.erb in view path app/views) I dont really understand why this is happening - shouldnt it pick the rjs template if present instead of the erb?

What I really want is to leverage http to parallelize the retrieval and rendering of images. How do I do that?

Thanks Anand

I tried a couple other approaches, but no success yet:

1. I reversed the blocks below - calling the load_images from within render :update - that did give me the results, but all at once in the end, not as the images show up. 2. I called redirect_to <controller/show_image?image_id=1 within the inner loop in 1, and created a show_image.js.rjs file which calls page.insert_html :bottom, 'images-div', :partial => 'image', but I get an error 'ActionView::MissingTemplate (Missing template <mycontroller>/ show_image.erb in view path app/views) I dont really understand why this is happening - shouldnt it pick the rjs template if present instead of the erb?

What I really want is to leverage http to parallelize the retrieval and rendering of images. How do I do that?

Thanks Anand

<img src="/controller/show_image?image_id=1" />

Then the browser will ask for that URL and you can respond with a send_file or send_data (rather than a render or redirect).

-Rob

Hi,

I have a rails application where I respond to a request by fetching image urls from various web api calls and need to display them as they come available. I am able to display all the images once I get them all, but that causes an unacceptable delay for my user.

One approach I am trying is, from my controller, set an @image variable, and then pass in a block to the model that retrieves the image urls. In the block, I call      In the controller, I have:   @query.load_images! do |image|       @image = image       render :update do |page|         page.insert_html :bottom, 'images-div', :partial => 'images'       end     end

In my query model, I have:

def load_images! &block    for(some_loop_that_gets_one_image_at_a_time) do        image = get_next_image        block.call(image)    end end

In the _images.html.erb, I have:

<%=image_tag @image.url %>

The problem is that with this approach, I get a DoubleRenderError, and I think this is because render is being called multiple times in the block call within the loop.

What is the best way to get the effect I need (to load images one at a time as they become available)?

Thanks Anand

-- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk@googlegroups.com. To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group athttp://groups.google.com/group/rubyonrails-talk?hl=en.

-- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk@googlegroups.com. To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.

Rob Biedenharn http://agileconsultingllc.com Rob@AgileConsultingLLC.com

Thanks, Rob

I tried a variant of your suggestion, where I redirect instead of send_data (since in my case, the images are coming from elsewhere) - I still have the same issue (that the images are all rendered once in the end,not one by one as they are retrieved). Here is the current code:

main controller:

def show_images render :update do |page| page.replace_html ‘images-div’, ‘’ @query.load_images! do |image| @image = image page.insert_html :bottom, ‘images-div’, :partial => ‘image’ unless @image.id.nil?

  end
end

end

query model:

def load_images! … for(some_loop_that_gets_one_image_at_a_time) block.call(image) end … end

_image.html.erb

<%=image_tag(‘/images/%s/show’ % @image.id)%>

images_controller:

def show @image = Image.find(params[:id]) redirect_to @image.url end

Thanks Anand

Thanks, Rob

I tried a variant of your suggestion, where I redirect instead of send_data (since in my case, the images are coming from elsewhere) - I still have the same issue (that the images are all rendered once in the end,not one by one as they are retrieved). Here is the current code:

main controller:

def show_images render :update do |page| page.replace_html ‘images-div’, ‘’ @query.load_images! do |image| @image = image page.insert_html :bottom, ‘images-div’, :partial => ‘image’ unless @image.id.nil? end end end

query model:

def load_images! … for(some_loop_that_gets_one_image_at_a_time) block.call(image) end … end

_image.html.erb

<%=image_tag(‘/images/%s/show’ % @image.id)%>

Right here, just let the browser leverage HTTP to get the parallelized behavior you seek:

<%= image_tag @image.url %>

or even:

If you’re doing a redirect, the url isn’t going to be “hidden” anyway.

You’re never going to get the images to show up “one at a time” unless you stop doing all the work in one request.

-Rob

Thanks again, Rob

I made the change you suggested (I realize that the additional action call and redirect are redundant), and I still get the images rendering all at once in the end. I am a newbie to rails, so dont understand fully how it works, but here are my current confusions :

  1. Does all the javascript of a “render :update” block get emitted in one go, or does each page.do_this call in that get sent back independently? If the former, then I understand that this approach wont work for me. If there is some way to achieve the latter, then each page.insert_html could be sent back independently, and each image could be rendered in parallel. Is there any way to achieve the latter, through some setting, perhaps?
  1. Rob said: You’re never going to get the images to show up “one at a time” unless you stop doing all the work in one request. Does that mean that I cannot call multiple page. do_something calls in parallel within the response chain of one request? All I want is to send an async request “get_images” and receive a callback “got_one_image” each time an image is ready…

Thanks Anand

Thanks again, Rob

I made the change you suggested (I realize that the additional action call and redirect are redundant), and I still get the images rendering all at once in the end. I am a newbie to rails, so dont understand fully how it works, but here are my current confusions :

  1. Does all the javascript of a “render :update” block get emitted in one go, or does each page.do_this call in that get sent back independently?

You get a single response to each request.

If the former, then I understand that this approach wont work for me. If there is some way to achieve the latter, then each page.insert_html could be sent back independently, and each image could be rendered in parallel. Is there any way to achieve the latter, through some setting, perhaps?

  1. Rob said: You’re never going to get the images to show up “one at a time” unless you stop doing all the work in one request. Does that mean that I cannot call multiple page. do_something calls in parallel within the response chain of one request? All I want is to send an async request “get_images” and receive a callback “got_one_image” each time an image is ready…

Thanks Anand

Yup! Now, if you really want to “chain” the requests, you could probably do some AJAX call so that the JavaScript that is sent back does one image replace and then immediately kicks off the next request. Alternatively, if you really only care about the appearance of a sequential load, do the sequential “reveals” with JavaScript (via scriptaculous or jQuery-effects).

Of course, it might make a big difference if you’re talking about 4-5 images or 400-500 images, too. Your “some_loop_that_gets_one_image_at_a_time” is rather vague after all.

-Rob

Thanks, Rob

I tried a variant of your suggestion, where I redirect instead of send_data (since in my case, the images are coming from elsewhere) - I still have the same issue (that the images are all rendered once in the end,not one by one as they are retrieved). Here is the current code:

main controller:

def show_images render :update do |page| page.replace_html ‘images-div’, ‘’ @query.load_images! do |image| @image = image page.insert_html :bottom, ‘images-div’, :partial => ‘image’ unless @image.id.nil? end end end

query model:

def load_images! … for(some_loop_that_gets_one_image_at_a_time) block.call(image) end … end

_image.html.erb

<%=image_tag(‘/images/%s/show’ % @image.id)%>

Right here, just let the browser leverage HTTP to get the parallelized behavior you seek:

<%= image_tag @image.url %>

or even:

If you’re doing a redirect, the url isn’t going to be “hidden” anyway.

You’re never going to get the images to show up “one at a time” unless you stop doing all the work in one request.

-Rob

images_controller:

def show @image = Image.find(params[:id]) redirect_to @image.url end

Thanks Anand

I tried a couple other approaches, but no success yet:

  1. I reversed the blocks below - calling the load_images from within render :update - that did give me the results, but all at once in the end, not as the images show up.
  2. I called redirect_to <controller/show_image?image_id=1 within the inner loop in 1, and created a show_image.js.rjs file which calls page.insert_html :bottom, ‘images-div’, :partial => ‘image’, but I get an error 'ActionView::MissingTemplate (Missing template / show_image.erb in view path app/views) I dont really understand why this is happening - shouldnt it pick the rjs template if present instead of the erb?

What I really want is to leverage http to parallelize the retrieval and rendering of images. How do I do that?

Thanks Anand

Then the browser will ask for that URL and you can respond with a send_file or send_data (rather than a render or redirect).

-Rob

Hi,

I have a rails application where I respond to a request by fetching image urls from various web api calls and need to display them as they come available. I am able to display all the images once I get them all, but that causes an unacceptable delay for my user.

One approach I am trying is, from my controller, set an @image variable, and then pass in a block to the model that retrieves the image urls. In the block, I call In the controller, I have: @query.load_images! do |image| @image = image render :update do |page| page.insert_html :bottom, ‘images-div’, :partial => ‘images’ end end

In my query model, I have:

def load_images! &block for(some_loop_that_gets_one_image_at_a_time) do image = get_next_image block.call(image) end end

In the _images.html.erb, I have:

<%=image_tag @image.url %>

The problem is that with this approach, I get a DoubleRenderError, and I think this is because render is being called multiple times in the block call within the loop.

What is the best way to get the effect I need (to load images one at a time as they become available)?

Thanks Anand

Rob Biedenharn http://agileconsultingllc.com Rob@AgileConsultingLLC.com

– You received this message because you are subscribed to the Google Groups “Ruby on Rails: Talk” group. To post to this group, send email to rubyonrails-talk@googlegroups.com. To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.

– You received this message because you are subscribed to the Google Groups “Ruby on Rails: Talk” group. To post to this group, send email to rubyonrails-talk@googlegroups.com. To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.

Rob Biedenharn http://agileconsultingllc.com

Rob@AgileConsultingLLC.com

+1 513-295-4739

Skype: rob.biedenharn

Thanks, Rob

I finally got it working by using periodically_call_remote in conjunction with the spawn plugin which runs the long process in parallel.

Thanks for your help! Anand