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

Question

我在rails web app上有一个ruby,在某些视图中我有许多重图像(<img>)来渲染.<img>它们是在Helper中生成的.

问题是首先加载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背景图像与类别列表相关联问题是images(<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'
]);

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