3

我有一个 ruby​​ on rails web 应用程序，在某些视图中，我有许多重图像（<img>）要渲染。<img>它们是在 Helper 中生成的。

问题是首先加载 css，然后是 js，然后是重图像，最后是 css 引用的背景图像。

加载所有重图像需要相当长的时间，因此会支撑整个网站。

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

导轨版本：2.3.8

编辑：谢谢你们，我很抱歉之前没有分享代码。

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

 
category.each 做 |cat|
    html <<"<a href='##{cat.id}' class='mapcat' >#{cat.libelle}</a>"
结尾

当我单击类别时，将显示图像

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

我有与类别列表关联的css背景图像问题是图像（<img>）显示在类别列表的css背景图像之前。

4

4 回答 4

7

我们需要假设一些事情，因为您还没有共享您的代码。

来到您的查询，现在您可以使用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'
]);

这节省了加载图像的加载时间。

于 2012-10-30T12:21:51.237 回答
2

使用 base64 字符串。

例子：

background-image: url(data:image/png;base64,*CONVERTED IMAGE DATA HERE*);
于 2014-06-24T12:52:14.000 回答
0

解决方案：不要使用 img 标签。

  1. 创建一个包含所有图像的精灵。在您的 application.html 布局中加载精灵一次。
  2. 使用 data uris 直接在 html 中传输数据。见http://css-tricks.com/data-uris/
于 2012-10-30T12:35:12.793 回答
0

我的方法是使用 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'));
  });
});
于 2013-06-04T22:27:52.470 回答