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

Question

我有一个 ruby​​ on rails web 应用程序，在某些 View 中我有许多重图像(<img>)要渲染。<img>在 Helper 中生成。

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

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

我想先加载 css 背景图片，然后加载其他图片，因为它们显然包含页面的视觉结构。

rails 版本:2.3.8

编辑:谢谢你们，我很抱歉没有早点分享代码。

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

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

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