자바스크립트를 활용한 로딩 효과 구현(+제이쿼리)

 

 

 

웹사이트 로딩 효과 구현하기

---

웹사이트에 로딩 효과를 자바스크립트를 사용해 구현해보도록 하겠습니다. 보통 로딩효과는 사이트 로딩이 긴 페이지에 들어가는데, 티스토리 블로그의 경우 너무 정적인 느낌이 강해 로딩 애니메이션을 넣어보도록하겠습니다.

 

 

See the Pen RwpxedW by junheeleeme (@junheeleeme) on CodePen.

 

 

 

Boxicons : Premium web friendly icons for free

 

로딩 효과를 보여주는 이미지는 박스아이콘을 사용했습니다. 사용방법은 홈페이지에 자세히 나와있습니다.

 

 

자바스크립트 코드

---

const loader = document.querySelector('.loader');
const html = document.querySelector('html');

html.style.overflow = 'hidden'; //로딩 중 스크롤 방지

window.addEventListener('load', ()=>{

     setTimeout(() => { //  <-* 로딩속도를 구현하기 위한 코드로 실제 적용시 제거
    
      	loader.style.opacity = '0';
		html.style.overflow = 'auto'; //스크롤 방지 해제
      	
        setTimeout(() => {
      		loader.style.display = 'none';
  		}, 400);
        
  }, 2000); // <-* 로딩속도 구현

})

 

제이쿼리 코드

---

const loader = $('.loader');
const html = $('html');

html.css({'overflow' : 'hidden'}); //로딩 중 스크롤 방지

$(window).on('load', ()=>{

     setTimeout(() => { //  <-* 로딩속도 구현
    
    loader.fadeOut(300);  
    html.css({'overflow' : 'auto'}); //스크롤 방지 해제
    
  }, 2000);  //  <-* 로딩속도 구현

})

 

로딩효과를 위해 setTimeout 함수가 있어 사용할 때는 제거해야함. 

 

로딩이 종료되는 시점을 addEventLisener의 'load' 이벤트를 사용했습니다. 'load' 이벤트는 사이트의 모든 리소스가 로드되면 실행하는 이벤트입니다. 이 보다 조금 더 빠른 'DOMContentLoaded' 이벤트가 있습니다.

 

DOMContentLoaded

---

DOMContentLoaded 이벤트는 load 이벤트와 달리 HTML 문서를 완전히 불러온 후 스타일 시트와 이미지 등은 기다리지 않는 이벤트입니다. 사이트의 이미지나 리소스가 많을 경우 로딩이 길게 표시되어 방문자의 이탈율이 높아질 수 있어 해당하는 사이트에는 DOMContentLoaded 이벤트를 사용하는 것이 좋습니다.