Question

我在rails web应用程序上有一个ruby，在某些视图中我有许多重图像（<img>）来渲染。<img>是在帮助程序中生成的。

问题在于首先加载css，然后加载js，然后加载重图像，最后加载css参考背景图像。

加载所有重型图像需要相当长的时间，因此可以保持整个站点。

我想首先加载css背景图像然后加载其他图像，因为它们显然具有页面的视觉结构。

rails版本：2.3.8

编辑：谢谢大家，我为没有早点分享代码而道歉。

我有两个模型：类别和图像，每个类别都有很多图像。在视图中，我有一个由帮助者生成的类别列表：

 
categories.each do |cat|
    html << "<a href='##{cat.id}' class='mapcat' >#{cat.libelle}</a>"
end

当我点击类别时，会显示图像

 categories_images.each do |i|
    html << "<div id='#{i.id}' class='#{css}'><img src='/images_moi/categories/#{cat.libelle}/#{i.path_file_name}' />"
  end

我有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布局中加载精灵一次。
使用数据uris直接在html中传输数据。请参阅http://css-tricks.com/data-uris/

Answer 4

我的方法是使用jquery和data-tags延迟加载图像。这种方法还允许我根据设备宽度和备用平板电脑/移动用户选择不同的图像。

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

在正常图像之前加载CSS背景图像？

4 个答案: