window.onload 한계 > script

window.onload 는 문서가 다 읽혀진후 실행해야할 함수가 있을 경우 유용하게 쓰입니다.

 

그러나 window.onload의 한계로 문서 하나에 하나의 함수만 읽을 수 있다는 것입니다.

 

예로 firstFunction 과 secondFunction 두개의 함수를 연결하려면

 

window.onload = firstFunction;

window.onload = secondFunction;

 

을 하면 실제로는 마지막 함수만 읽어온다.

 

이를 피하는 방법은

 

window.onload = function () {

  firstFunction();

  secondFunction();

}

 

이런 방법이다.

 

좀더 고급적(?)으로 풀어내기 위해서 사이먼 윌리슨 이라는 사람이

 

function addLoadEvent(func) {

  var oldonload = window.onload;

  if(typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      oldonload());

      func();

    }

  }

}

 

라는 함수를 만들었습니다. 사용방법은 문서상단에 위 함수를 정의하고 문서 어느 곳에서든

 

addLoadEvent(firstFunction);

addLoadEvent(secondFunction); ... 이런 식으로 추가합니다.

 

또 다른 방법 하나

 

window.onloadListeners = new Array();

 

window.addOnloadListener(func) {

  window.onloadListeners[window.onloadListeners.lenght] = func;

  // 한줄 한줄 읽히면서 호출하기때문에 페이지 전체의 addOnloadListener 함수의 갯수가 아니라 순차적으로 저장됩니다

}

 

window.onload = function() {

  for(var i=0;i<window.onloadListeners.length;i++) {

    var func = window.onloadListeners[i];

    func.call();

  }

}

 

addOnloadListener(myFunction1);

addOnloadListener(myFunction2); 이런식으로 추가합니다.