JS to determine the completion of the CSS file loading of the concrete implementation

  In most cases we do not need to determine whether the CSS file is loaded successfully, but some time this function is needed, today I have to organize a variety of browser-compatible decision CSS file load completion method to share with you

To determine whether the CSS file is loaded, the different browser practices are quite different, this time to say that IE browser do a good job, we can directly through the OnLoad method to deal with the completion of the CSS loading processing:   Code as follows://code excerpt to Seajs function Styleonload (node, callback) {   /for ie6-9 and Opera     if (node.attachevent) {    &NB Sp Node.attachevent (' onload ', callback);      //NOTICE:      //1. "OnLoad" would be fired in ie6-9 when the ' file is 404 ', but in      //This situation, Opera does nothing, s o Fallback to timeout.      //2. "OnError" doesn ' t fire in any browsers!    }}      Unfortunately, this time in other browsers, it is not convenient to judge whether CSS is loaded or not, FF, WebKit can determine whether the load is complete by Node.sheet.cssRules whether the property exists. and need to use settimeout Interval event polling:       Code as follows://code excerpt to seajs  function poll (node, callback) {    if (ca llback.iscalled) {      return;    }     var isLoaded = false;     if (/webkit/i.test (navigator.useragent)) {//webkit       if (node[' sheet '){        isLoaded = true;      }    }    //for Firefox     Else if (node[' sheet ']) {      try {        if (node[' sheet '].cssrules) {&nbs P         isLoaded = true;        }      } catch (ex) {       //Ns_error_dom_security_err         if (Ex.code = = 1000) {          isLoaded = true;     &NB Sp   {     }    }     if (isLoaded) {     //give time to render.       settimeout (function () {      callback   ();       1);    }     else {      settimeout (function () {        poll (node, c Allback);      }, 1);    }  }    settimeout (function () {&NBsp    poll (node, callback); }, 0);      SEAJS gives a complete deal like this:     code is as follows: function styleonload (node, callback) {   //F or ie6-9 and Opera     if (node.attachevent) {      node.attachevent (' onload ', callback);      //NOTICE:      //1. "OnLoad" would be fired in ie6-9 when the ' file is 404 ', but in      //This situation, Opera does nothing, s o Fallback to timeout.      //2. "OnError" doesn ' t fire in any browsers!    }    //polling for Firefox, Chrome, Safari     else {      settimeout ( function () {        poll (node, callback);       0); For cache    }  }   function poll (node, callback) {    if (callback.iscalled) {      return;    }     var isLoaded = false;     if (/webkit/i.test (Navigator.useragent)) {//webkit       if (node[' sheet ']) {        isLoaded = true;   &nbs P  }    }    //for Firefox     else if (node[' sheet ']) {      try {& nbsp       if (node[' sheet '].cssrules) {          isLoaded = true;     &NBSP ;  }      } catch (ex) {       //ns_error_dom_security_err         if (Ex.code = = 1000) {          isLoaded = true;        }   & nbsp  }    }     if (isLoaded) {     //give time to render.       S Ettimeout (function () {        callback ();       1);    }     else {      settimeout (function () {        poll (node, c Allback);      }, 1);   }  }//My dynamic Create link function createlink (cssurl,lnkid,charset,media) {      var head = d Ocument.getelementsbytagname (' head ') [0],         Linktag = null;    if (!cssurl) {     return false; &nbsp}       Linktag = document.createelement ( ' Link ');  linktag.setattribute (' id ', Lnkid | | ' Dynamic-style '));  linktag.setattribute (' rel ', ' stylesheet ');  linktag.setattribute (' CharSet '), (CharSet | | ' Utf-8 '));  linktag.setattribute (' Media ', (media| | ') All));  linktag.setattribute (' type ', ' text/css ');     Linktag.href = cssurl;        Head.appendchild (linktag); } function Loadcss () {&NB Sp   var stylenode = createlink ('/wp-content/themes/bluenight/style.css ');       Styleonload (Stylenode,function () {        alert ("loaded");    });   When I saw Seajs's code, I immediately remembered another solution that I saw Diego Perini: The code was as follows:/*  * COpyright (C) Diego Perini  * All rights reserved.  *  * cssready.js-css loaded/ready State notification  *  * Author:diego Perini <diego.perini at Gmail com>  * version:0.1  * created:20100616  * release:20101104  *  * License:  * & Nbsp;http://www.jb51.net * Download:  *  http://javascript.nwbox.com/cssready/cssready.js  */ Function Cssready (FN, link) {  var d = document,   t = d.createstylesheet,   r = t? ' Rules ': ' Cssrules ',   s = t? ' StyleSheet ': ' Sheet ',   L = d.getelementsbytagname (' link ');  //passed link or last link node   link | | (link = l[l.length-1]);   function Check () {    try {      return link && link[s] && Link[s][r] &A mp;& Link[s][r][0];    } catch (e) {      return false;    }  }   (function poll () {  &N Bsp Check () && SettimeouT (FN, 0) | | SetTimeout (poll, 100);  }) (); }      In fact, if you read the code of the Domready event of jquery, the principle is similar. It is also the way to determine whether a DOM node is loaded by settimeout polling. Also, Fackbook consists of a fixed style in a dynamically created CSS style, such as #loadcssdom,loadcssdom, which is a height 1px style. Then dynamically create a DOM object and add this loadcssdom style. Then it is also settimeout polling loadcssdo whether it has a height of 1px. This approach to the solution, we can under the "cssp:loading CSS with Javascript–and getting a onload callback." and "Javascript Patterns," the author of Stoyan in his Blog, a more detailed description of "is a stylesheet really loaded?" After reading these, you may sigh: Khan, to determine whether the CSS loaded completed, is not so easy at present! Actually I here is a kind of discussion, because development, in addition to dynamically loading CSS, we also dynamically loading JavaScript, dynamic loading HTML operation, I will also write about dynamic loading JavaScript related content, but before that, I suggest you look at these:     "Ensure–ensure javascripts/html/css are loaded on-demand when needed", this library is dedicated to dynamically loading Html,css,javascript. As the author introduces:         Ensure is a tiny JavaScript library that provides a handy function ensure which all OWS to load JavaScript, HTML, CSS On-demand, and then execute your code. Ensure www.jb51.net ensures that relevant JavaScript and HTML snippets areAlready in the browser DOM before executing your code that uses them.     "Tell CSS"-JavaScript is available ASAP     After reading this, you may not be entangled: when you ' re styling parts of a web Page that'll look and work differently depending to whether JavaScript is available or not. Well, this time to say so much, I hope that the development and learning for everyone to help!