preloading a partial view in rails with javascript

Question

On a mouse click of a button, I switch out an image in a div with another partial in Rails. The problem is that loading the image in that partial is slow... I want to preload the image in it. Is there a way to do this? Can I preload the partial somehow?

in my view

-@other_images.each do |img|
  .thumbnail_wrapper
    .thumbnail_image
      =image_tag img.image.url(:thumbnail), :class => 'button' , :onClick => "replaceImg(#{img.id});"

js

function replaceImg(id){
  var url = '/images/refresh/' + id;
  new Ajax.Updater('content_image', url);
}

Many thanks!

lbz · Accepted Answer · 2010-11-28 00:10:12Z

1

I suppose your partial are renderd withint the view. Preloading is cheating the browser to make it sure it needs a resource, and it needs it now.

Javascript

You can force the images to preload before being actually shown in Javascript:

<script language="javascript">
function img_preloader() {
     myimg = new Image();
     images = new Array();
     images[0]="image1.jpg";
     images[1]="image2.jpg";
     images[2]="image3.jpg";
     images[3]="image4.jpg";

     // start preloading
     for(i=0; i<=3; i++) {
          myimg.src=images[i];
     }
} 
</script>

In this way for every iteration within the for loop one of your images are loaded.

To programmatically generate the array you can (in erb):

<script language="javascript">
function img_preloader() {
     myimg = new Image();
     images = new Array();
     <% @array_of_img_paths.each do |path| %>
     images.push("<%= path %>");
     <% end %>

     // start preloading
     for(i=0; i<images.length; i++) {
          myimg.src=images[i];
     }
} 
</script>

Just HTML

programmatically open one iframe for every image you want to preload
set the src of the iframe to the image you want to preload
set the iframe size as tiny as possible

Now images are (pre)loaded in parallel according to the browser and server setup.

CSS

Set the image you want to preload as the background image of a div noone will ever see:

div.noone_will_see {
    background-image: url("image1.jpg");
    background-repeat: no-repeat;
    background-position: -1000px -1000px;
}

Iterate for every image you want to preload.

edited Nov 28, 2010 at 0:10

answered Nov 27, 2010 at 22:14

lbz

9,7582 gold badges33 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mtay Over a year ago

Hmm thank you, I know that much -- but I'm stuck because it's not quite so simple as doing images[0]="image1.jpg"; I'd rather do: images[id]="image"+id+".jpg"; and to do this, I need to know the ids of the images on the page at the time (they vary). So I need to pass in my rails variable to this js function... I can't seem to make this work if the var is in a different .js file. So I was hoping to just render the partials directly. Gar.. sorry if this is a bit confusing.

lbz Over a year ago

Thank you for your clarification. What's wrong with doing images[id]="image"+id+".jpg"? Iterate on evey id of the image you want to preload to create the js snippet within the HTML. Since the images may vay, the js will vary, so I cant see the point to have a shared js for different pages.

mtay Over a year ago

hey lbz, thanks for your response! Well, that does seem fine. but then how do I tell my js function what the id is? Sorry I'm a newbie -- right now, the id is stored in the rails variable @featured_image.id. When the page finishes loading, I want to somehow grab that variable and then tell my js function that this is the id, and increment from there. But I'm pulling my hairs out on how to do it. What am I missing?

mtay Over a year ago

ah! i posted a new question for what I feel like has grown into a new issues. any help of yours would be much, much appreciated. stackoverflow.com/questions/4294616/…

lbz Over a year ago

Updated the answerm with a short example in erb. I am not into haml, maybe it can be translated somehow.

Collectives™ on Stack Overflow

preloading a partial view in rails with javascript

in my view

js

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

in my view

js

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related