프론트엔드

[트러블 슈팅] 페이지 길 때만 top 버튼 보이기(feat. window.onload, $(document).ready 차이)

BeforB 2022. 1. 17. 22:46
728x90

 

트러블 슈팅하기!

 

 

Smart Editor 프로젝트의 연장선으로

QA 기간에 모바일에서 게시판 목록이랑 게시판 내용 페이지의 길이에 따라 top 버튼을 만들어달라는 요청이 들어왔다.

 

 

열심히 구글링해서 적용했는데.. 목록화면에서는 잘 동작하는데 내용화면에서는 제대로 동작하지 않았다. 원인을 분석하다가 결국 답은 window.onload()와 $(document).ready()의 차이를 이해하느냐의 문제였다.

우선 내가 작성한 코드를 먼저 보여주고 각 function의 차이를 정리해보려고 한다.

 

 

1. 스크롤이 생길 때만 top 버튼 보이기

우선 게시판 목록에서 돌아갔던 코드

$(document).ready(function() {

    let scrollHeight = document.documentElement.scrollHeight;
    let clientHeight = document.documentElement.clientHeight;
    
    if(scrollHeight > clientHeight) {
    	$("#topButton")[0].style.display = "";
    }
    
})

 

 

위 코드를 게시판 내용에 똑같이 적용했더니 동작하지 않았다.

원인은 게시판 내용에 이미지들이 있는데 $(document).ready()는 리소스들이 로드되기 전에 동작하기 때문이다.

 

해결은 $(document).ready()를 window.onload()로 변경해주는 것이었다.

window.onload = function() {

    let scrollHeight = document.documentElement.scrollHeight;
    let clientHeight = document.documentElement.clientHeight;
    
    if(scrollHeight > clientHeight) {
    	$("#topButton")[0].style.display = "";
    }
    
})

 

 

 

 

 

2. $(document).ready()와 window.onload의 차이

 

1) $(document).ready()

호출 시점

- 리소스 로딩과 상관 없이 DOM이 로드된 시점(DOM 트리 생성 직후)

- window.load() 보다 빠르게 실행 됨

 

특징

- 여러 번 선언해도 순서대로 실행 됨

 

 

 

2) window.onload()

호출 시점

- 화면에 필요한 모든 요소(css, js, 이미지 등 포함)들이 로드된 이후

 

특징

- 여러 번 선언하면 처음 선언한window.onload()만 선언됨

- 외부 링크나 파일 include할 경우 동일 스크립트가 있을 경우 둘 중 하나만 적용됨

 

 

 

호출 순서

DOM 생성 → $(document).ready() → 이미지를 포함한 리소스 로드 → window.onload()

 

 

 

 

 

 

 

728x90