jQuery에서 Ready 메소드를 시뮬레이션하고 CSS 및 JS 예제 code_jquery의 주문형 로딩을 구현합니다.

var Ready = (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', 핸들, false );
document.addEventListener( 'readystatechange', 핸들, false );
document.addEventListener( 'load', 핸들, false );
}
else if ( document.attachEvent ) {
document.attachEvent( 'onreadystatechange', 핸들 );
document.attachEvent( 'onload', 핸들 );
}
반환 함수 준비(콜백) {
if ( isReady ) {
callback.call(document);
}
else {
funs.push(callback);
}
} ;
}());


PS:
이 함수 코드는 권위 있는 가이드북을 참조합니다. 유일한 차이점은 추가 판단 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 === '객체' || typeof obj === '함수' ) {
        var key = Object.prototype.toString.call(obj);
        return classTypes[key];
    }
    obj 반환 유형;
}

// css按需加载
function loadCss(cssUrl, 콜백) {
    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;
    }
    // for ie
    함수 핸들 () {
        if ( elem.readyState === 'loaded' || elem.readyState === 'complete' ) {
            if (bl && !isExecuted) {
               callback();
>>   // nonie
의 경우    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 handler(){
        var status = elem. ReadyState;
        if (상태 === '로드됨' || 상태 === '완료') {
            if (bl && !isExecuted) {
               callback();
                isExecuted = true;
           }
            elem.onreadystatechange = null;
        }
    }
    elem.onreadystatechange = handler;
    // 不ie
의 경우    if (bl && ! 실행됨) {
        elem.onload = callback;
        isExecuted = true;
    }
    elem.src = scriptUrl;
    document.getElementsByTagName('head')[0].appendChild(elem);
}


PS: 링크 및 스크립트 요소가 로드되었는지 판단할 때 IE9 이하의 브라우저에서는 주로 로드 이벤트에 의존합니다. IE는
요소.readyState 상태는 요소가 로드되었는지 여부를 결정하며, 이상하게도 ie9(및 다른 브라우저 버전)에서는 요소에 로드 이벤트와 Readystatechange 이벤트가 모두 있으므로 변수 isExecuted가 코드에 추가됩니다. 콜백이 실행되면 콜백이 두 번 실행되는 것을 피하기 위해 더 이상 실행되지 않습니다.
3. 호출 방법