正常的图像之前加载CSS背景图像？(Loading CSS background images be

我有在轨道上的Web应用程序红宝石，并且在某些视图中，我有许多重图像（ <img>来呈现.The <img>在一个助手生成。

问题是，CSS是第一次加载，那么JS，那么重的图像，然后最后的CSS refereneced背景图像。

这需要相当长的时间对所有的重型图像的加载，因此其拥有整个网站了。

我想先加载CSS背景图像，然后加载其他的图像，他们显然保存该页面的视觉结构。

轨版本：2.3.8

编辑：谢谢你们，我不具有共享的代码早道歉。

我有两种型号：分类和图像，每个类别有很多图片。在视图中，我有类别的列表，这是通过辅助产生：

   categories.each做|猫|      HTML << "<a href='##{cat.id}' class='mapcat' >#{cat.libelle}</a>"  结束

当我点击类别显示在图像

   categories_images.each做|我|      HTML << "<div id='#{i.id}' class='#{css}'><img src='/images_moi/categories/#{cat.libelle}/#{i.path_file_name}' />"    结束

我有关联类别的列表中的问题是，图像（CSS背景图像<img>的类别的列表的CSS背景图像之前显示。

Answer 1:

我们需要因为你没有共享代码承担的东西。

来到您的查询，现在你可以使用jQuery预加载图片：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

这样可以节省加载图像的加载时间。

Answer 2:

使用一个base64字符串。

例：

background-image: url(data:image/png;base64,*CONVERTED IMAGE DATA HERE*);

无：**
在线转换器： http://webcodertools.com/imagetobase64converter
注意：我只建议这如果图像大小不是太重。

Answer 3:

解决办法： 不要使用img标签。

创建一个包含所有图像的精灵。负载在application.html布局精灵一次。
使用数据URI来将数据直接在html传输。见http://css-tricks.com/data-uris/

Answer 4:

我的方法是延迟加载使用jQuery和数据标签的图像。这种方法也让我选择基于设备的宽度和备用平板电脑/手机用户不同的图像。

<img src="" data-src="/img/graphic-desktop.jpg" data-smallsrc="/img/graphic-smaller.jpg" alt="Graphics" class="lazy" />

<!-- the following would be in your js file -->
$lazy = $('img.lazy');

$(window).load(function(){
  // window load will wait for all page elements to load, including css backgrounds
  $lazy.each(function(){
    // run thru each img.lazy on the page. spare the jquery calls by making $this a variable
    $this = $(this);
    // if the window is greater then 800px wide, use data-src, otherwise, use the smaller graphic
    ($(window).width() >= 800) ? $this.attr('src', $this.attr('data-src')) : $this.attr('src', $this.attr('data-smallsrc'));
  });
});

文章来源: Loading CSS background images before normal images?