자바스크립트 로딩이지미 예시

오늘은 엑셀 업로드하는 화면에서

업로드 행이 너무 많아 로딩이미지 화면을 보여줘야 나을 것 같아서 

작업을 해보았다.

// image 로 저장된 loading 화면 
<div id="load">
<img src="/images/common/loading.gif" alt="loading">
</div>


$( document ).ready(function() {
$('#load').hide(); // 시작할때는 무조건 hide !!
});


function loadShowing(){
$("#load").show(); // submit 전에 show !!
form.submit();
}

소스는 위에꺼 참조하면 되는데

원리는 로딩 오래걸리는 화면에는 기본값으로 hide 를 시켜주고

어떤 함수 실행이 로딩이 오래걸린다고 생각하면 submit 이 되기 전에 로딩 화면을 띄워주는 

코드를 넣어주고 submit 시켜주면 된다.

 

결과 !!

CSS는 이것저것 찾아서 해보았는데워낙 들어가있는 것들이 많아 틀어져서..ㅎㅎ 디자인팀에 따로 요청했다..ㅎㅎ 요청하시길;; !!

 

 

로딩이미지 제작사이트 !!

Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator (icons8.com)

Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator

loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator