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

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

使用javascript预加载rails中的局部视图

JS

1 个答案: