Loading CSS background images before normal images?

Question

I have a ruby on rails web app, and in some views i have many heavy images( `` ) to render .The `` 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 << "#{cat.libelle}" end ``` and when I click on the category the images are displayed ``` categories_images.each do |i| html << "

Accepted Answer

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.

Loading CSS background images before normal images?

Solution

Problem