how to check if a dynamically added style tag has been parsed by browser?

Question

I'm adding a style tag with text content from localStorage for an element which has inline style display:none;. Afterwards I call a script file which makes that element visible. But at that time it seems that the browser hasn't parsed the styles yet. So for a short moment the element style is shred. I want to prevent that - so is there a way to check, if the styles has been parsed?

Here is the code:

HTML:

<div id="my_element" style="display:none;">
   //...content of the element goes here
</div>

JS:

try{
    if (typeof(Storage) !== "undefined" && typeof localStorage !== "undefined" && localStorage !== null && localStorage.getItem("stylesheet") !== null) {
       var stylesheet = JSON.parse(localStorage.getItem('stylesheet'));
       $('<style>').attr('id', 'my_stylesheet').text(stylesheet).prependTo('#my_element');
    }else{
       load_css_from_server();  
    }
}catch(e){          
    load_css_from_server();
}
load_my_external_javascript_and_append_to_head();

External Javascript File:

$(document).ready(function(){
   //some code here
   $('#my_element').slideDown('slow');
   //some code there
});

I already tried to check if the Style Element with the ID my_stylesheet exists but that doesn't mean that the browser interpreted and rendered the css. Is it possible to check that?

The key appears to be the `load_css_from_server()` - you need to add a *callback* to this method (and/or the similarly named one for js). See this answer: http://stackoverflow.com/a/17858428/2181514 — freedomn-m, Oct 14 '16 at 11:19
Possible duplicate of [jQuery: loading css on demand + callback if done](http://stackoverflow.com/questions/3498647/jquery-loading-css-on-demand-callback-if-done) — freedomn-m, Oct 14 '16 at 11:20
Thanks! But that wouldn't solve the problem with the CSS loaded from localstorage... — user2718671, Oct 14 '16 at 11:22
How is that a duplicate? It's not about getting the css file from the server and using a callback function for that. It's about loading it from local storage so the answers of that other question are completely useless to me. — user2718671, Oct 14 '16 at 11:26
Hence *possible* duplicate... it's possible that you'd look at that answer and go - ah yes, add a callback to my localstorage load so I know when it's finished loading - done. Maybe not. — freedomn-m, Oct 14 '16 at 12:26

user2718671 · Accepted Answer · 2016-10-14T12:07:25.450

Solution #1 (slow because script loads after styles are rendered): I think I found a solution. But unfortunately it makes the page slower because it waits till the styles are rendered before it loads the javascript. It's not loading the styles and the script parallel anymore...

I changed:

$('<style>').attr('id', 'my_stylesheet').text(stylesheet).prependTo('#my_element');

to:

$('<style>').attr('id', 'my_stylesheet').attr('onload','load_my_external_javascript_and_append_to_head();').text(stylesheet).prependTo('#my_element');

and removed the load_my_external_javascript_and_append_to_head(); at the bottom.

Solution #2 (it's a bit faster): As Callback I used:

$('<style>').attr('id', 'my_stylesheet').attr('onload','styles_rendered();').text(stylesheet).prependTo('#my_element');

At the top of the inline script I set this global variable:

window.styles_have_rendered = false;

The callback function switches the variable to true:

function styles_rendered(){
    window.styles_have_rendered = true;
}

Within the external script I use a timeout to check if the Styles have rendered:

function show_my_element(){
   if(window.styles_have_rendered){
       $('#my_element').slideDown('slow');
       delete window.styles_have_rendered;
   }else{
       setTimeout(function(){show_my_element()},100)
   }
}
show_my_element();

how to check if a dynamically added style tag has been parsed by browser?

1 Answers1