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

Question

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.

Answer 1

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.

Answer 2

Use a base64 string.

Example:

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

• without: **
• online converter: http://webcodertools.com/imagetobase64converter
• note: I only would suggest this if the image size is not too heavy.

Answer 3

Solution: Do not use the img tag.

1. Create a sprite containing all your images. Load the sprite in your application.html layout once.
2. Use data uris to transmit the data directly in the html. See http://css-tricks.com/data-uris/

Answer 4

My approach is to lazy load the images using jquery and data- tags. This approach also allows me to choose different images based on device width and spare tablet/mobile users.

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