javascript - when the dynamic stylesheets is applied? -
i load style.css dynamically in javascript. when style loaded, i'll calculation depends on styles. code this:
link = document.createelement('link'); link.href = 'sheety.css'; link.rel = 'stylesheet'; document.head.appendchild(link); link.onload = function(){ //some code //here, can't the correct style sometime. //but of time, can correct style settimeout(function(){ //here, can correct style }, 1000); };
so, question is: when style applied successfully?
if modify element's position(width, height), can correct value instant, or must wait time let browser using settimeout()
function?
i read resources says: call dom.getcomputedstyle
cause browser reflow. indeed call method, still wrong width/height of dom.
when debug js code in chrome, can see style not applied @ break point (from style tab in chrome developer tools).
once style sheet loaded, cssom or cssobjectmodel generated. along dom, cssom rasterized rasterizer , applied (in chrome, done skia).
a style can said applied when browser completes reflow or repaint. can force browser redraw using many techniques:
- element.hide().show(); #using jquery
- inserting node dom , removing it.
these techniques better explained in similar question.
Comments
Post a Comment