javascript - How to determine when document has loaded after loading external css -
how determine when document has loaded(or loading) after loading external css?
normal page has loaded , complete @ first time(with using document.onreadystatechange or document.readystage), after time script call function place new stylesheet css html changing background or images. during change stylesheet, document has still stage complete. stage never has been changed after calling function? why?
timeline(example):
- visit 1 page : localhost/index.html
- document has stage loading
- document has stage complete
- user trying change theme, @ time stage hasnt been changed yet.
update: without jquery:)
update: example problem using 1 image:
<!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <script> document.onreadystatechange = function(){ console.log(document.readystate); }; function checkdocumentstate(){ console.log(document.readystate); return settimeout(function(){ checkdocumentstate(); }, 1000); } checkdocumentstate(); </script> </head> <body> <img src="" onclick="this.setattribute('src','http://i.imgur.com/urbtadp.jpg')" style="width:50px; height:50px; background-color:gray; " /> press empty image , open new image. </body> </html> 
found answer: how can tell when css background image has loaded? event fired?
but hopeless .. lack of universality...
css called after dom elements populated. why in days of dial internet, page load funky looking, , of sudden start develop desired page bit bit. suggest using jquery instead, use following code able ensure document loaded , css implemented
$document.ready(function() { //insert code here } hope helps
Comments
Post a Comment