jQuery で Ready メソッドをシミュレートし、CSS と JS のオンデマンド読み込みを実装するサンプル code_jquery

varready = (function(){
var isReady = false,
funs = [];
関数ハンドル (e) {
if ( isReady ) {
return;
}
if ( e.type = == 'readystatechange' && (document.readyState !== 'interactive' && document.readyState !== 'complete') ) {
length; i ) {
funs[i].call(document);
document.addEventListener( 'DOMContentLoaded', handle, false );
document.addEventListener( 'readystatechange', handle, false );
document.addEventListener( 'load', handle, false );
}
else if ( document.attachEvent ) {
document.attachEvent( 'onreadystatechange', handle );
document.attachEvent( 'onload', handle );
}
return function準備完了 (コールバック) {
if ( isReady ) {
callback.call(document);
}
else {
funs.push(callback);
}
} ;
}());


追記:
この関数コードは、権威あるガイドブックを参照しているだけです。唯一の違いは、追加の判定 document.readyState !== 'interactive' であることです。

2. CSS をオンデマンドでロードします。js

/**
*
* パラメータのタイプを決定します
* createTime: 2013/9/18
*
*/
関数型 (obj) {
var classTypes, objectTypes;
if ( obj == null ) {
return String(obj) ;
}
classTypes = {};
objectTypes = ('ブール数値文字列関数配列日付 RegExp オブジェクト エラー').split(' ');
for ( var i = 0, len = objectTypes.length; i < len i ) {
classTypes[ '[object ' objectTypes[i] ']' ] = objectTypes[i].toLowerCase();
}
if ( obj === 'object' || typeof obj === 'function' ) {
var key = Object.prototype.toString.call(obj);
return classTypes[key];
}
return typeof obj;
}

// css按必要追加ダウンロード
function loadCss (cssUrl, callback) {
var elem, bl,
isExecuted = false; // ie9 中、コールバック実行两次
if ( cssUrl == null ) {
return String(cssUrl);
}
elem = document.createElement('link'),
elem.rel = 'stylesheet';
if ( type(callback) === 'function' ) {
bl = true;
}
// ie
関数ハンドル() {
if ( elem.readyState === 'loaded' || elem.readyState === 'complete' ) {
if (bl && !isExecuted) {
callback();
isExecuted = true;
}
elem.onreadystatechange = null;
}
}
elem.onreadystatechange = handle;
// for 非ie
if (bl && !isExecuted) {
elem.onload = callback;
isExecuted = true;
}
elem.href = cssUrl;
document.getElementsByTagName('head')[0].appendChild( elem);
}
// js按必要追加ダウンロード
function loadScript(scriptUrl, callback) {
var elem, bl,
isExecuted = false; // 在ie9中、コールバック実行两次
if (scriptUrl == null) {
return String(fn);
}
elem = document.createElement('script');
if ( type(callback) === 'function' ) {
bl = true;
}
// for ie
function handle(){
var status = elem. readyState;
if (status === 'loaded' || status === 'complete') {
if (bl && !isExecuted) {
callback();
isExecuted =本当です。
}
elem.onreadystatechange = null;
}
}
elem.onreadystatechange = handle;
// for 非ie
if (bl & & !isExecuted) {
elem.onload = callback;
isExecuted = true;
}
elem.src = scriptUrl;
document.getElementsByTagName('head')[0].appendChild(elem);
}

loadCss('http://www.jb51.net/apps/tbtx/miiee/css/base.css', function(){
console.log('css がロードされました') ;
});
loadScript('http://www.jb51.net/apps/tbtx/miiee/js/jQuery.js', function(){
console.log(' js 読み込み完了');
});
ready(function(){
console.log('dom の準備ができました!');
});