Javascript 로딩화면 - javascript lodinghwamyeon

loading.gif 띄우기, 로딩 이미지 띄우기, 로딩 화면 띄우기, 로딩중 이미지 띄우기, 로딩중인 화면 띄우기, 로딩중인 화면 만들기, 자바스크립트 로딩 이미지 띄우기, 자바스크립트 로딩 화면 띄우기, 제이쿼리 로딩 이미지 띄우기, 제이쿼리 로딩 화면 띄우기

관련글

• (즐거웅코드) 제이쿼리 form문 동적 생성 및 submit 하기 2021.06.09

• (즐거웅코드) 자바스크립트 form문 동적 생성 및 submit 하기 2021.06.08

• (즐거웅코드) svg로 중간에 마스크 씌워진 삼각형 그리기 2021.06.06

• (즐거웅코드) svg로 삼각형 그리기 2021.06.05

댓글 0

+ 이전 댓글 더보기

비공개 댓글 남기기

데이터를 처리할 때 화면에 로딩 이미지를 띄워봅시다.

1. 로딩 관련 style 태그 

WEB 화면에 로딩 이미지를 이쁘게 띄우기 위해 로딩 이미지에 대한 style 태그를 정의합니다.

$(document).keyup(function(e) {
    if (e.keyCode == 27) { // escape key maps to keycode `27`
    	$('#loading').hide();   
   }
});

사용자의 키보드에서 값을 받는 keyup 이벤트를 사용합니다.

e.keyCode == 27 은 사용자에게 esc 값을 받을 때의 조건입니다.

esc 값을 받으면 로딩 이미지를 숨깁니다. 

$('#btnSearch').click(function() {
	$('#loading').show();   
	$('#page').val('1');		
	$('#frmSearch').submit();
});
-------------------------------------------------
검색

btnSearch를 누를경우 로딩 이미지를 보여주고 form 태그와 함께 submit합니다.

submit에 대한 프로세스를 처리하는 동안 로딩 이미지를 보여줍니다. 

로딩중 표시 함수 Javascript로 로딩중 표시를 하기 위한 함수는 다양한 방법으로 만들 수 있습니다. 그 중에서 제가 생각하기에 굉장히 괜찮은 함수를 소개해보려고 합니다. function LoadingWithMask() { //화면..

kkamikoon.tistory.com

HTML 페이지

https://ourcstory.tistory.com/191

[웹프로그래밍] HTML 페이지 데이터 로딩 화면 구현하기

들어가며 웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 채워지지 않는 경우가 있습니다. 그렇기 때문에 사용자들에게..

ourcstory.tistory.com

https://m.blog.naver.com/PostView.nhn?blogId=dh3115&logNo=221230037221&proxyReferer=https%3A%2F%2Fwww.google.com%2F

로딩중 표시 함수 Javascript로 로딩중 표시를 하기 위한 함수는 다양한 방법으로 만들 수 있습니다. 그 중에서 제가 생각하기에 굉장히 괜찮은 함수를 소개해보려고 합니다. function LoadingWithMask() { //화면..

kkamikoon.tistory.com

HTML 페이지

https://ourcstory.tistory.com/191

[웹프로그래밍] HTML 페이지 데이터 로딩 화면 구현하기

들어가며 웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 채워지지 않는 경우가 있습니다. 그렇기 때문에 사용자들에게..

ourcstory.tistory.com

https://m.blog.naver.com/PostView.nhn?blogId=dh3115&logNo=221230037221&proxyReferer=https%3A%2F%2Fwww.google.com%2F

728x90

로딩 창 키는 함수

jQuery를 이용해 마스크와 로딩 이미지 삽입.

// 로딩창 키는 함수
function openLoading() {
    //화면 높이와 너비를 구합니다.
    let maskHeight = $(document).height();
    let maskWidth = window.document.body.clientWidth;
    //출력할 마스크를 설정해준다.
    let mask ="<div id='mask' style='position:absolute; z-index:9000; background-color:#000000; display:none; left:0; top:0;'></div>";
    // 로딩 이미지 주소 및 옵션
    let loadingImg ='';
    loadingImg += "<div id='loadingImg' style='position:absolute; top: calc(50% - (200px / 2)); width:100%; z-index:99999999;'>";
    loadingImg += " <img src='https://loadingapng.com/animation.php?image=4&fore_color=000000&back_color=FFFFFF&size=128x128&transparency=1&image_type=0&uncacher=75.5975991029623' style='position: relative; display: block; margin: 0px auto;'/>";
    loadingImg += "</div>"; 
    //레이어 추가
    $('body')
    		.append(mask)
    		.append(loadingImg)
    //마스크의 높이와 너비로 전체 화면을 채운다.
    $('#mask').css({
            'width' : maskWidth,
            'height': maskHeight,
            'opacity' :'0.3'
    });
    //마스크 표시
    $('#mask').show();  
    //로딩 이미지 표시
    $('#loadingImg').show();
}

로딩 창 끄는 함수

jQuery를 이용해 마스크, 로딩 이미지 제거.

// 로딩창 끄는 함수
function closeLoading() {
    $('#mask, #loadingImg').hide();
    $('#mask, #loadingImg').empty(); 
}

예제

실제 사용은 로딩 창 열기 - 작업 할 프로세스 실행 - 완료 - 로딩 창 닫기.

예제는 간단히 하기 위해 setTimeout 사용.

See the Pen loading process by Kim Jae Ik (@doitdoik) on CodePen.

728x90

공유하기

게시글 관리

저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글