How to load a small css background image before lots of other images (html element in .css file)?

javascript html css image background

11,197

Solution 1

Backgrounds are usually loaded at the end.

You could try to preload them by using:

body:after{
    display:none;
    content: url(img01.png) url(img02.png) url(img03.png);
}

Or by using javascript:

<script>
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();
    img1.src="img01.png";
    img2.src="img02.png";
    img3.src="img03.png";
</script>

Or you could also delay the loading of the normal images by using jQuery and do something like:

<script type="text/javascript">
$(document).ready(function() {
    $("#img1").attr("src", "img01.png");
    $("#img2").attr("src", "img02.png");
    $("#img3").attr("src", "img03.png");
});
</script>

And of course, the javascript code should be in the header of the site. Not at the bottom before the </body> tag as it is usually placed.

Solution 2

Use link to preload items like images, videos and other content before the webpage will be shown. It works with many types of content. More about it in https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

<link rel="preload" href="img.png" as="image">

Solution 3

You can put

<img style="display:none;" src="../images/background.jpg" />

at the top of your <body> tag to make load it earlier.

Source: https://www.sitepoint.com/community/t/is-there-a-way-i-can-force-my-background-image-to-load-before-the-other-images/4500/5 .

11,197

Author by

Whitenoise

Updated on June 04, 2022

Comments

Whitenoise almost 2 years
I'm wondering if you can help. I have a small image (46kb) which is currently called in CSS like this:
```
html {
background: #000 url(../images/background.jpg) repeat fixed;
}
```
The problem I have with this at the moment is that the background is the last thing to load. On most of my pages I have anywhere from around 50 to 150 small 4kb images (which are content images). Consequently all these images load first before the background image. While this isn't a big deal, as the content is still readable, surely there is a way to load the small background image first?

Ideally I would like to use a CSS solution, but JS is fine, but don't want to use Jquery. I have tried a few methods, but quite a few of these require the image to be placed in the HTML, which is not possible in this case.

Thanks.

Edit: Just to clarify about JQuery, I haven't used it at all in the site so far, so it seems a bit overkill to use it just for loading a small background image. And yes the html {} declaration is at the top of the CSS file (just below some resetting declarations.
Whitenoise over 10 years

I had tried your second solution before, and it didn't work. Looking at my file in the head section, I was including a file which loads my stylesheets, and then including a file that did any javascript functions, where this script was located. I noticed that if I swapped these around, so the javascript functions came first, this worked. However it appeared to cause an annoying problem in ie6 where it would only load the page after all images on the page had been loaded. Put the original order back and it worked again in IE6, but obviously not in firefox anymore! annoying!
Whitenoise over 10 years

Figured out the issue, for some reason IE6 didn't like one of my declarations in @fontface {}. Removed that and it worked fine in both browsers. Marked as the right answer, as even though it was because my stylesheet and js functions were the wrong way round, this put me on the right path. Thanks.