用JavaScript预加载Rails中的部分视图

Question

鼠标单击按钮时，我在div中切换了一个图像，在Rails中切换了另一个部分。 问题是该部分中的图像加载速度很慢...我想在其中预加载图像。 有没有办法做到这一点？ 我可以以某种方式预加载部分内容吗？

在我看来

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

非常感谢！

Answer 1

我想你的局部渲染在视图内。 预加载欺骗了浏览器，以确保它需要资源，并且现在需要它。

使用Javascript

您可以强制图像在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>

这样的内每次迭代for图片的一环被加载。

要以编程方式生成数组，您可以（在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>

只是HTML

• 以编程方式为要预加载的每个图像打开一个iframe
• 将iframe的src设置为您要预加载的图像
• 将iframe尺寸设置得尽可能小

现在，根据浏览器和服务器设置并行并行（预）加载图像。

CSS

将您要预加载的图像设置为没人能看到的div背景图像：

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

迭代要预加载的每个图像。