개탕 IT FACTORY

onLoad 이벤트 (image.onload) 본문

Front-end/JAVASCRIPT&TYPESCRIPT

onLoad 이벤트 (image.onload)

rendar02 2023. 1. 22. 23:00
반응형

서론

회사에서 채팅 서비스 구현당시 스크롤 이동을 위해서 돔 조작이 필요했는데

이미지의 경우 로드되는 속도가 느려 스크롤 이동이 중간에 멈추는 현상이 발생하여 onLoad함수라는 것을 사용하여 해결한 것을 작성할려구 한다.

onLoad란?

https://developer.mozilla.org/ko/docs/Web/API/Window/load_event

  • MDN 문서에 따르면

💡 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행

 

쉽게 말해서 모든 요소가 로딩이 완료된 다음에 실행되는 이벤트이다.

  • DOM의 standard 이벤트이다

사용법

  1. window.onload
window.onload = function() {
	// 실행될 코드 
}
  1. html 태그 속성으로 지정
<body onload="실행될 코드">

주의사항

  1. 로드된 이후에 실행되기 때문에 불필요한 로딩이 발생될 수 있음
  2. 이미지의 외부 소스의경우 모든 페이지가 불려온 이후에 작동되므로 이미지가 안뜨거나 딜레이 발생
  3. 동일한 문서에는 하나의 onload만 존재

적용사례

필자의 경우 채팅내에서 데이터가 불려올시, 최신 메시지가 있을시 스크롤을 최하단으로 내리는 이벤트가 존재하였는데 이미지의경우 cdn에서 받은 데이터여서 한차례 딜레이가 있어 스크롤 이벤트에서 캐치를 못하였다.

그래서 관련 height를 event로 캐치하여 height를 계산하는 로직으로 해결하였다.

const pushImageScroll = (height: number) => {
  const el = document.querySelector("#chatField");
  el.scrollTop += height;
};

<img
  src={fileImage}
  onLoad={(e) => {
    pushImageScroll(e.currentTarget.height);
   }}
 />

정리

  • 모든 dom이 로드된 이후에 데이터 처리 및 애니메이션 처리할시에 적합한 방식인거 같다.
  • 이미지의 경우 cdn에서 불려오는 경우가 대부분이라 다른 텍스트 데이터보다 늦게 불려오는 경우가 있어 관련 onload를 통하여 최적화를 할수 있을거 같다.
반응형