CSS Lazy Loading in Chrome

Question

I've ran into some weird cases of positioning problems when lazy loading CSS in Chrome, e.g. the positioning of some elements (absolute, relative and cascaded) is off by sometimes huge margin.

Basically what I'm doing is leaving out the standard loading of the stylesheet via an link-Tag and instead placing a placeholder span-Tag for the sake of having an easy way to retrieve the URL later on at the end of the body-Tag. After the DOM loaded fully, I replace the span-Tag with a generated link-Tag like this:

loadCSS: function()
{
    var el = jQuery('.is_css');
    if(!el.length) return;

    // Build link element
    var linkEl = jQuery('<link />').attr({
        media: 'all',
        type: 'text/css',
        rel: 'stylesheet',
        href: el.data('src')
    });

    el.replaceWith(linkEl);
}

I can verify that the CSS is fully loaded as most of the elements are looking exactly as if I embed the CSS directly in the head-Tag. My guess is that Chrome doesn't correctly calculate positions in some circumstances for absolute or relative positioned elements when the CSS is loaded after the DOM has been loaded.

I would like to provide you with HTML / CSS Snippets, unfortunately it's out of scope to isolate the falsely rendered Elements. So instead I'm asking if anybody encountered similar problems that can cause this behaviour. Maybe there are some general hints on how to fix such problems.

Kind regards

are you lazy loading all your CSS or just additional chunks? — diggersworld
– diggersworld, Commented Jun 16, 2015 at 14:53
Have you looked at this: github.com/rgrove/lazyload -- it's no longer being updated or maintained but it might either provide a solution or a base for you to create your own version. — Todd
– Todd, Commented Jun 16, 2015 at 14:55
What happens if you force repaint after CSS was loaded? repaint snippet — Bogdan Kuštan
– Bogdan Kuštan, Commented Jun 16, 2015 at 15:00
@Sutuma: can I ask why you're doing it? It might be your taking performance too far. One thing to note is that if you lazy load all your CSS then there will be a period of time that the page is completely unstyled, and from a user perspective that's not going to look very good. — diggersworld
– diggersworld, Commented Jun 16, 2015 at 16:02

sach · Accepted Answer · 2015-06-26 11:31:53Z

3

Sutuma,

The methodology you are trying could have strong performance impact. As a principle CSS need to be loaded before html DOM is rendered to have an effect. My guess is your html is rendered before CSS get loaded. Here are the option you may try: 1. Load all css in html header tag 2. Reload your html page one css is content is downloaded. 3. You can use html templating with (require js + require css plugin) for lazy loading.

require js , require-css plugin

answered Jun 26, 2015 at 11:31

sach

2711 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Lazy Loading in Chrome

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related