이미지 로딩 애니메이션(feat. 저화질, skeleton loading)
이미지를 로딩하는 동안, 그 공백을 채우는 방법은 여러가지가 있다. 이번 시간에는 저화질의 이미지 혹은 skeleton 로딩을 띄우는 방법을 알아보자! 1. 저화질 이미지 먼저 띄우기 A. 원본의 저화질 이미지 준비하기 첫번째 방법은 저화질 이미지를 먼저 띄우는 방법이다. 아래 사진은 실제로 띄울 이미지인데, 이 이미지의 저화질도 준비한다. B. 저화질 먼저 적용하기 img의 src에 저화질 이미지를 먼저 적용한다. css에서 image의 크기를 설정한다. /*css*/ .image { width: 300px; } C. js에서 load 이벤트 사용하기 a. load이벤트? 브라우저에 입장 혹은 퇴장할 때 발생하는 이벤트가 있다. 사용자가 사이트 입장시, DomContentLoaded와 load 이벤트가..
2021. 9. 23.
