21.01.18 오류 해결
스크롤 down했을 때 요소들이 fade up 되는 애니메이션을 추가하고 난 뒤
비즈니스 탭의 text 애니메이션이 제대로 실행되지 않는 문제가 있었다.
✔ 원인은 바로 .load 함수를 쓰지 않은 것이었다.
나는 다음 코드를 추가했는데 오류 없이 잘 실행되었다.
✔ $(요소 선택).load(function(){this.width;})
$(window).load()와 $(document).ready() 의 차이점
.ready() 함수로 문제를 해결하려고 했지만 실패했었다. 그 이유는 아래와 같다.
$(document).ready()는 이미지, 외부 리소스와는 상관 없이 브라우저가 DOM을 모두 생성한 직후 실행된다.
$(window).load()는 웹페이지의 이미지 랜더링이 모두 완료되고 나면 실행된다.
속도 측면에서는 ready 함수를 쓰는 것이 맞다.
console.log를 ready와 load에서 동시에 실행시키면 ready 함수에서 값이 먼저 출력된다.
하지만 내가 구현하는 것에는 세 가지 애니메이션이 겹쳐있었고
ready 함수를 쓰게 되면 DOM은 로딩되었지만 웹페이지 이미지 랜더링이 되지 않아
그 안에 event handler가 발생하게 되었을 때 제대로 실행되지 않는다.
시간은 느리더라도 load 함수를 사용하는 것이 이미지의 랜더링이 끝나고
안정적이게 이벤트 함수를 실행시켜서 오류가 안 났다.
함수가 실행되는 객체 대상이 무엇이냐에 따라서도 오류가 발생한다는 것이 굉장히 충격적이었다.
공부가 많이 필요한데 시간은 한정적이고 선택과 집중이 중요한 것 같다.
몰라도 되는 건 넘어가고 제대로 잡고 가야하는 개념은 여유를 갖고 다 이해하는 것이
가장 빠른 길이라는 것을 오늘도 느꼈다. 그걸 판단하는 것도 실력이니 얼른 실력을 키우자!!