JS/CSS delayed loading script

Source: http://www.cnblogs.com/snandy/archive/2011/04/30/2033272.html

As Javascript is becoming more and more in Web apps, many JavaScript codes are not used when pages are loaded for the first time. In this case, to improve the download speed and page rendering efficiency, We need to delay loading of these unused JS files, that is, only download them when they are used. Here, we will first implement the most simple JS inertia loading. In the next few articles, the function will be gradually enhanced until a complete JS/CSS module is loaded to the library. In this series, I will not implement the queue, that is, each JS file is downloaded in parallel, and the callback is executed only after all the JS files are downloaded. Of course, in the second series of JS queue lazyload, each JS file will be loaded sequentially, and each JS file will have a callback opportunity after download. These two methods have their own application scenarios.

First, provide the interface

 
Lazyload. js (
URLs//JS file path
FN//Callback Function after all loads
Scope//Specify the callback function execution Context
);
 

Example

 
Lazyload. js (['A. js','B. js','C. js'],Function(){
Alert ('Loaded');
});
 

This system will do its best to load all JS files, that is, when a file does not exist or fails to be loaded, it will not be interrupted and will still load other JS files. Callback is not performed until all modules are loaded once.

The JS Loading completed in the previous article is on demand. This article adds a new method CSS to load the CSS file. The interface is the same as that in JS, for example:

Lazyload.css (['A.css','B .css','C.css'],Function(){
Console. Log ('CSS module loaded');
});
 

The loading implementation of js in the previous article is through the script element, while CSS is through the link element. The link element only supports the onreadystatechange event in IE6/7/8/9 and opera. Firefox/Safari/chrome neither supports onreadystatechange nor onload. Here we use setTimeout to delay loading.

CompleteCode

 Lazyload  =     Function  (WIN ){
  VaR  List1,
List2,
Isie  =     /*  @ Cc_on! @  */  !  1  ,
Doc  = Win.doc ument,
Head  =  Doc. getelementsbytagname (  '  Head  '  )[  0  ];

  Function  Createel (type, attrs ){
  VaR  El  =  Doc. createelement (type ),
ATTR;
  For (ATTR  In  Attrs ){
El. setattribute (ATTR, attrs [ATTR]);
}
  Return  El;
}
  Function  Jsdone (OBJ ){
List1.shift ();
  If  (  !  List1.length ){
OBJ. FN. Call (obj. Scope );
}
}
  Function  Cssdone (OBJ ){
List2.shift ();
 If  (  !  List2.length ){
OBJ. FN. Call (obj. Scope );
}
}
  Function  JS (URLs, FN, scope ){
  VaR  OBJ  =  {
Scope: Scope  |  Win,
FN: FN
};
List1  =  []. Concat (URLs );
 For  (  VaR  I  =  0  , Len  =  URLs. length; I  <  Len; I  ++  ){
  VaR  Script  =  Createel (  ' Script  '  , {SRC: URLs [I]});
  If  (Isie ){
Script. onreadystatechange  =     Function  (){
  VaR  Readystate  =     This  . Readystate;
  If (Readystate  =     '  Loaded  '     |  Readystate  =     '  Complete  '  ){
  This  . Onreadystatechange =     Null  ;
Jsdone (OBJ );
}
}
}  Else  {
Script. onload  =  Script. onerror  =     Function  (){
Jsdone (OBJ );
}
}
Head. appendchild (SCRIPT );
}
}
  Function CSS (URLs, FN, scope ){
  VaR  OBJ  =  {
Scope: Scope  |  Win,
FN: FN
};
List2  =  []. Concat (URLs );
  For  (  VaR  I  =  0  , Len =  URLs. length; I  <  Len; I  ++  ){
  VaR  Link  =  Createel (  '  Link  '  ,{
Href: URLs [I],
Rel:  '  Stylesheet '  ,
Type:  '  Text/CSS  '  
});
  If  (Isie ){
Link. onreadystatechange  =     Function  (){
  VaR  Readystate  =    This  . Readystate;
  If  (Readystate  =     '  Loaded  '     |  Readystate  =     '  Complete  ' ){
  This  . Onreadystatechange  =     Null  ;
Cssdone (OBJ );
}
}
}  Else  {
SetTimeout (  Function  (){
Cssdone (OBJ );
},  50  * Len );
}
Head. appendchild (Link );
}
}
  Return  {
JS: JS,
CSS: CSS
};
}(  This  ); 

Http://files.cnblogs.com/snandy/LazyLoad_0.3.js download