Loading CSS background images before normal images?
Solution 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.
Solution 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.
SelimN
Updated on June 04, 2022Comments
-
SelimN almost 2 years
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>"
endand 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}' />"
endI 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.