CSS Lazy Download in Chrome

Question

I came across some strange cases of positioning problems when loading CSS lazily in Chrome, for example. the positioning of some elements (absolute, relative and cascading) is sometimes disabled by a huge margin.

Basically, what I am doing does not take into account the standard loading of the stylesheet using the link-tag and instead places the spanholder tag in order to have an easy way to get the URL later at the end of the body-Tag. After the DOM has fully loaded, I will replace the span-tag with the generated link-tag as follows:

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 look exactly the same as if I inserted the CSS directly into the head-tag. I assume that Chrome does not correctly calculate positions in some cases for absolute or relative positioned elements when CSS loads after loading the DOM.

I would like to provide you with HTML / CSS snippets, unfortunately, it goes out of scope to isolate falsely rendered elements. So instead, I ask if anyone is facing similar issues that might cause this kind of behavior. Perhaps there are some general tips on how to fix such problems.

Yours faithfully

Answer 1

Sutuma,

The methodology you are trying can have a big impact on performance. As a principle, CSS needs to be loaded before the html DOM is rendered in order to have an effect. I assume your html is displayed before loading CSS. Here is an option you can try: 1. Load all the css into the html header tag. 2. Reload the html page that the content loads. 3. You can use html templating with (require js + require css plugin) for lazy loading.

js required , require-css plugin