javascript 동적 load

1. 개요

jquery 와 Ajax 의 많은 사용으로 javascript 에서 해야 하는 일이 많아지고 하나의 page 에서 load 하는 javascript file 들이 많아 짐에 따라

초기 화면 loading 속도가 느려지는 것을 느낄 수 있다.

초기 화면 loading 시 필요한 javascript 만 가져오고 다른 js file 은 필요 시 동적으로 load 할 수 있다.

2. function 정의

function loadJavascript(url, callback, charset) {

    var head= document.getElementsByTagName('head')[0];

    var script= document.createElement('script');

    script.type= 'text/javascript';

    script.charset = charset==null?"utf-8":charset;

    var loaded = false;

    script.onreadystatechange= function () {

        if (this.readyState == 'loaded' || this.readyState == 'complete') {

            if (loaded) {

                return;

            }

            loaded = true;

            callback();

        }

    };

    script.onload = function () {

        callback();

    };

    script.src = url;

    head.appendChild(script);

}

3. 사용 방법

$('#loadBt').click(function(){

loadJavascript('/TestProject/resources/js/test.js', function(){

// javascript load 완료

}, null);

});