Html 在普通图像之前加载CSS背景图像？

我有一个RubyonRails web应用程序，在某些视图中，我有许多沉重的图像（

“

结束

我有css背景图像关联到类别列表 问题是图像（

）显示在类别列表的css背景图像之前。

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

关于您的查询，现在您可以使用jQuery预加载图像：

categories.each do |cat| html <<

"<a href='##{cat.id}' class='mapcat' >#{cat.libelle}</a>"

end

函数预加载（数组图像）{
$（arrayOfImages）.each（函数（）{
$('
这节省了加载图像的加载时间。
解决方案：不要使用img标签。

创建包含所有图像的精灵。在application.html布局中加载精灵一次
使用数据URI直接在html中传输数据。请参阅
我的方法是使用jquery和数据标记延迟加载图像。这种方法还允许我根据设备宽度和备用平板电脑/移动用户选择不同的图像

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

$lazy=$（'img.lazy'）；
$（窗口）。加载（函数（）{
//窗口加载将等待加载所有页面元素，包括css背景
$lazy.each（函数（）{
//运行页面上的每个img.lazy。通过将$this作为变量来避免jquery调用
$this=$（this）；
//如果窗口宽度大于800px，请使用数据src，否则，请使用较小的图形
（$（window.width（）>=800）？$this.attr（'src'，$this.attr（'data-src'）：$this.attr（'src'，$this.attr（'data-smallsrc'））；
});
});
使用base64字符串。

例如：

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


没有：**
在线转换器：
注意：只有在图像大小不太大的情况下，我才会建议这样做
我想预加载css背景图像，而不是我在Firefox中发现这是不可靠的-有时它只是在
img
标记被垃圾收集后转储图像，并且必须再次下载。我通常将生成的图像标记粘贴到
div
中，并显示
显示：none
，以真正解决问题css精灵的问题是我必须修改css（大文件）现在我需要一个快速的解决方案，但从长远来看，我肯定会使用css sprite。我想我会使用AJAX加载图像，包括加载动画。使用AJAX获取图像，一旦加载，用一个漂亮的过渡显示它们。
<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'));
  });
});

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