在正常图像之前加载CSS背景图片？ [英] Loading CSS background images before normal images?

问题描述

我有一个ruby在rails web应用程序，在一些视图中我有许多沉重的图像（< 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> ）。

解决方案

我们需要假设，因为您尚未分享您的代码。 / em>

现在，您可以使用 jQuery 预加载图片：

  function preload（arrayOfImages）{
 $（arrayOfImages）.each（function（）{
 $（'< img / 0] .src = this; 
 //或者你可以使用：
 //（new Image（））。src = this; 
}）; 
} 
 
 //用法：
 
 preload（[
'img / imageName.jpg'，
'img / anotherOne.jpg '，
'img / blahblahblah.jpg'
]）; 
  

这会节省载入图片的时间。

I have a ruby on rails web app, and in some views i have many heavy images( <img> ) to render .The <img> are generated in a Helper.

The problem is that the css is loaded first, then the js, then the heavy images , and then finally the css refereneced background images.

It takes quite a while for all of the heavy images to load, which therefore holds the whole site up.

I want to load first the css background images then load the other images, as they obviously hold visual structure of the page.

rails version: 2.3.8

EDIT: Thank you guys, I apologize for not having shared the code earlier.

I have two models : Categories and Images, each Category has many images. In the view i have a list of categories, which is generated by a helper :

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

and when I click on the category the images are displayed

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

I have css background image associated to the list of category The problem is that the images (<img>) is displayed before the css background images of the list of categories.

解决方案

We need to assume things because you haven't shared your code.

Coming to your query, for now you can preload images using 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'
]);

This saves the loading time of loading images.

这篇关于在正常图像之前加载CSS背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！