이미지를 로딩할 경우 용량이 매우 큰 경우를 감안하여 완전히 로딩이 끝난 후에 추가하는 방법은 어떻게 할까요?
위와 같이 인스턴스를 생성한 후 DOM에 추가하는 방법은 아래와 같습니다.
# 제이쿼리인 경우
# 자바스크립트 사용시
아래는 addEventListner를 사용한 방법입니다.
추가적으로 이미지를 로딩 후 부드럽게 보이는 효과를 추가하면 어떻까요?
제이쿼리의 경우 DOM에 추가할 때 fade()를 사용하면 쉽고 간단하게 이미지가 부드럽게 로딩되는 것을 볼 수 있습니다.
코드 스니펫 widget