window.onload()는 쓰지말자.(feat. readyState)

onload?

웹브라우저가 html, script(이거를 도중에 만나면 다운받을때까지 기다림), 이미지를 다 그린이후에 작동됨

 

window.onload()와 window.addEventListener('load',...)의 차이

같은 의미이지만 window.onload()를 사용할때는 주의해야하는데 만약 여러 onload함수를 사용했을경우 마지막 onload만 실행되고 이전것들은 뭍히기 때문에 주의해야한다.

window.onload = function () {
    console.log("onload 실행되지않음!!!");
};
 
window.onload = function () {
    console.log("onload 실행됨");
};
 
window.addEventListener("load", function () {
    console.log("addEventListener 실행됨");
});
 
window.addEventListener("load", function () {
    console.log("addEventListener 실행됨");
});

 

활용 예시

window.addEventListener('load', ()=>{
    if(!isLogin){
        //UI 로그인요청
    }
})

참고로 document.readyState라는 것을 활용하여

최초 브라우저 로딩시에 뜰 로딩 아이콘을 넣어도 좋을 것같다.

if(document.readyState === 'loading'){
    debugger;
}

https://ko.javascript.info/onload-ondomcontentloaded#window-onload

DOMContentLoaded, load, beforeunload, unload 이벤트

https://stackoverflow.com/questions/38499989/what-is-the-difference-between-window-onload-and-document-addeventlistenerlo