Flicker/slow css when loading contentn and css async

Question

so I am loading a new page and a css file for this page via ajax.

After all the css files are added to the page, I set the opacity of the page to 1, but it shows up without the css applied and after a second or so the css is applied. This looks horrible, how can I avoid it?

I did not find a clean way to detect when css fully loaded.

Any idea why it shows up like this? I think the css might not be fully downloaded yet, but as I said, I do not know how to avoid that.

Answer 1

There is AFAIK no bullet-proof way of checking when a CSS file is loaded and styles have applied without using a "layout" element, then listen for it.

F.ex in your CSS file:

#layout{ height:1px }

Then in your javascript (I use jQuery here):

var $layout = $('<div>').attr('id', 'layout').appendTo('body');
var check = function() {
    return $layout.height() == 1;
}

if ( !check() ) {
    var tries = 0,
        interval = 10,
        timeout = 5000; // max ms to check for
    setTimeout(function timer() {
        if ( check() ) {
            console.log('CSS loaded');
            $layout.remove();
        } else if (tries*interval >= timeout) {
            console.log('timeout');
        } else {
            tries++;
            setTimeout(timer, interval);
        }
    }, interval);
}