Large CSS background-image blocks Javascript while loading

Question

From everything I've been able to find a large CSS background-image shouldn't block javascript from executing. Unfortunately, on both Firefox and Chrome this does seem to be the case.

If I do a hard refresh on Chrome I can see the background slowly load (on a slow connection) and then once it's finished my JavaScript executes, displaying the rest of the page's content.

I'm using jQuery's $(document).ready and Facebook's window.fbAsyncInit methods to run the JavaScript when the DOM and Facebook SDK are ready.

I'm not sure if it's relevant but the background is set in CSS with:

body {
    background: black url(...) no-repeat top center fixed;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
}

I am already using CSS Media Queries to load smaller images for smaller screen resolutions and making the background images smaller won't fix the problem; it would just hide the symptoms.

What else should I do to ensure that the background image doesn't block JavaScript execution?

My thought would be to load a dummy background image and then have JavaScript append another stylesheet with the real background images (and media queries for smaller screens) but this seems hacky.

I've had some success putting JS in the and not relying on external files, but if that's a problem then I'd suggest your hack as they way I'd go. Not ideal, and hopefully someone here has a better answer — Offbeatmammal, Mar 10 '13 at 21:00

score 6 · Accepted Answer · answered Mar 10 '13 at 21:12

Loading a background image doesn't keep Javascript from running. The reason is most likely that loading the image keeps the script from being loaded in the first place.

Browsers have a limitation to the number of requests they run simultaneously against each domain, and similarly web servers have a limitation on the number of requests that it handles simultaneously from the same user. Sometimes the limit is as low as one or two simultaneous downloads.

If you want the script to load before the image, use script so set the background image in the CSS. That way you know that the script has loaded before the image starts loading:

$(document.body).css('background-image', 'url(...)');

That's a good theory. I tried delaying it until the JavaScript runs unfortunately while it did start the JavaScript sooner it doesn't matter because the AJAX requests that fire on page load then get delayed anyways. I think you're right on the number of concurrent requests being the bottleneck though; I am going to try combining the JS and CSS into fewer files and putting my images into sprites. — Brad Dwyer, Mar 11 '13 at 14:05

score 0 · Answer 2 · answered Mar 10 '13 at 21:01

Because you're using the $(document).ready() function, jQuery is on purpose, waiting till all the images, etc have loaded. This is to protect against a couple of problems, such as if I were to call:

$('#div-with-background-image').css('background')

...then jQuery would want to know whether the image had loaded.

To lazy-load the images, add a body class and only display images once the class has been added. This can be done like:

In the js: $(document).ready(function() { $('body').addClass('loaded'); } In the css: .loaded #div-with-background-image { background-image: url('...'); }

Alternately, you could use the $(window).load(function() {...}) method instead of $(document).ready

No, you got it backwards. The `ready` event doesn't wait for content to load, that is the `load` event. The `ready` event is trigggered when the document has loaded. — Guffa, Mar 10 '13 at 21:04

score 0 · Answer 3 · edited May 23 '17 at 12:09

a) There are ways to reduce the file size of images without the user noticing anything in the image details, just look for some libraries or software that can do it.

b) I don't really think that the CSS is the main problem here, I think that your javascript is too heavy (check out the execution time in your developer tools or firebug).

c) It takes a lot of workload time to use social media connections like Facebook, you should consider not loading the facebook sdk in the head, but to do it in the body.

d) Here's a post from the facebook developers on how to optimize the social plugin performance: http://developers.facebook.com/blog/post/530/

e) Check this out: Non-blocking javascript and css in modern browsers. Is it still needed?

Large CSS background-image blocks Javascript while loading

3 Answers3