HTML page에 javascript를 동적으로 loading하는 방법을 소개합니다.
<script src="javascript_filename.js"></script>
일반적으로 다음과 같이 html file을 편집합니다.
<html>
<head>
</head>
...
<script src="xxx"></script>
<body ...>
...
</body>
</html>
그러나 html 중간에 <script src="xxx"></script> 이와 같이 기술하면 javascript를
로딩하는 시간 때문에 뒤의 html body의 loading이 느려집니다. 즉 site loading이 늦는 것처럼 보입니다.
필자는 html page의 loading을 어떻게 하면 빠르게 처리할까? 생각을 하다가 다음과 같은 방법을
생각해봤습니다. 실제 javascript 파일이 큰 경우에는 html page loading 속도가 빨라집니다.
그래서 필자가 생각한 방법이 다음과 같습니다. html을 먼저 loading하고 화면 배치가 될때
javascript를 나중에 loading하는 방법입니다. 이를 위해서 script에 setTimeout을 설정하고 50 milisecond가 지나면 javascript를 로딩하도록 변경하였습니다. 우선 html page의 loading 속도가 빨라졌습니다.
그리고 이와 같은 방법은 여러 web application의 개발에 도움이 많이 될 것입니다.
<html>
<head>
</head>
...
<script id=_wdl_js_WCButtonCtrl_js language="javascript">setTimeout("WCPage_loadScript
('_wdl_js_WCButtonCtrl_js','/wdl/js/WCButtonCtrl.js')",50);</script>
<script>
function WCPage_loadScript(sElmtid,sSrc)
{
try
{
var oScript = window.document.getElementById(sElmtid);
oScript.src = sSrc;
}
catch (ex)
{
}
}
</script>
<body ...>
...
</body>
</html>
위와 같이 개발하면 page loading 속도가 빨라집니다.
위의 방법에서 약간 advanced 된 방법을 하나 더 소개합니다.
<html>
<head>
</head>
...
<script id=_wdl_js_WCButtonCtrl_js language="javascript">setTimeout("WCPage_loadScript
('_wdl_js_WCButtonCtrl_js','/wdl/js/WCButtonCtrl.js')",50);</script>
<script>
function WCPage_loadScript(sElmtid,sSrc)
{
try
{
var oScript = window.document.getElementById(sElmtid);
oScript.src = sSrc;
}
catch (ex)
{
...
}
}
</script>
<script>
var callCount = 0;
function doSomething()
{
try
{
callCount ++;
if (callCount > 100)
{
return;
}
if (window.WCButtonCtrl_initObj != null)
{
setTimeout('doSomething()',50);
}
WCButtonCtrl_initObj();
}
catch (ex)
{
...
}
}
doSomething();
</script>
<body ...>
...
</body>
</html>
위의 코드에서 doSomething()이 loading되면서 실행하게 호출을 하였습니다.
doSomething()에서는 WCButtonCtrl_initObj()를 호출합니다.
그런데 WCButtonCtrl.js에 WCButtonCtrl_initObj()가 있고,
doSomething이 실행될 때에는 WCButtonCtrl.js에 loading이 아직 되지 않았습니다.
따라서 loading이 될때까지 timeout으로 기다려 줘야 합니다.
하지만 영원히 기다릴 수 없기 때문에 callCount가 100이 넘어가면 fail하도록 코드를 구성하였습니다.
위의 코드를 보고 너무 복잡한 것이 아니냐 라고 할 수 있습니다. 하지만 dynamic script loading 기법이
아니라도 javascript에서 맨 처음 호출 되는 함수는 doSomething 처럼 개발하는 것이 좋습니다.
Internet Explorer에서 HTML page를 loading할때 순차적으로 loading한다는 보장이 없습니다
어떤경우는 HTML이 loading은 되었지만 getElementById로 검색을 하면 해당 HTML
element를 찾지 못하는 경우가 있습니다. 이러한 경우을 위해서라도 javasscript 혹은 HTML가 loading이
끝났는지를 점검하는 기능은 필요합니다. 개발자들이 유용하게 사용하기를 바랍니다.
출처 : 고급 웹 UI 개발 라이브러리 Web Development Library
소스공개 : http://www.webdevlib.net
'IT_Programming > JavaScript' 카테고리의 다른 글
| [펌] This 키워드 (0) | 2010.03.31 |
|---|---|
| [펌] 클로져(Closure) is what? (0) | 2010.03.25 |
| multi select box...item move (0) | 2008.01.25 |
| 화면 절대 좌표 찾는 스크립트 (0) | 2008.01.25 |
| javascript : merge (0) | 2008.01.25 |