safari에서 이미지 로딩에 관하여...

BottomSheet(이하, BS)를 이용해서 메인화면에 광고를 띄우려했다.

근데 safari에서 BS의 위치가 화면 중간에 랜더링되었다. 알고보니 광고 BS의 높이가 533px이었다. 그런데 실제 최종 랜더링 되는 높이는 402px이어서 중간에 뜨는 것이다.

알고보니 이유는 광고 BS에 들어가있는 이미지가, 사파리같은경우 화면에 나타날때 비로소 이미지가 랜더링되기때문이다.(lazyloading) 그래서 h-fit으로 되어있어서 이미지가 랜더링되고 난뒤에 이미지 크기만큼 height가 맞춰지는것.

그래서 화면에 나타나지 않아도 맨처음 BS를 호출할때 아예 이미지가 랜더링되게 해야한다. 아주 간단하게 구현가능하다.

 <Image
  width={28}
  height={28}
  alt="bottom-sheet-image"
  src={"/assets/common/dark_gray_cancel_circle.png"}
  loading="eager" // 추가!
/>

loading방식을 eager로 변경하기

그럼 사파리에서도 처음부터 이미지가 랜더링되어 광고 BS의 높이가 바뀌거나 그러지 않는다

끝!