로딩중 표시 함수


Javascript로 로딩중 표시를 하기 위한 함수는 다양한 방법으로 만들 수 있습니다.

그 중에서 제가 생각하기에 굉장히 괜찮은 함수를 소개해보려고 합니다.


function LoadingWithMask() {
	//화면의 높이와 너비를 구합니다.
	var maskHeight = $(document).height();
	var maskWidth  = window.document.body.clientWidth;
	
	//화면에 출력할 마스크를 설정해줍니다.
	var mask       = "<div id='mask' style='position:absolute; z-index:9000; background-color:#000000; display:none; left:0; top:0;'></div>";
	var loadingImg = '';
	 
	loadingImg += "<div id='loadingImg'>";
	loadingImg += " <img src='LoadingImg.gif' 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();
}


이 함수를 실행하게 되면 여러분이 저장해둔 LoadingImg.gif 파일을 로딩하여 보여줍니다.




 

 로딩중 표시 제거 함수


로딩중인 표시를 제거해야할 경우에는 다음과 같은 함수를 실행시키면 됩니다.


function closeLoadingWithMask() {
	$('#mask, #loadingImg').hide();
	$('#mask, #loadingImg').remove();  
}


이 함수를 사용하는 예제와 예제 소스를 보시도록 하겠습니다.




 

 로딩중 예제 소스와 예제


먼저 전체 예제 소스를 먼저 살펴보도록 합시다.

아래의 소스는 예제를 설명하기 위해 조금 각색했습니다.


 

 예제 소스

 

<script>
function test(imageName) {
	LoadingWithMask('your site\'s image path');
	setTimeout("closeLoadingWithMask()", 3000);
}

function LoadingWithMask(gif) {
	//화면의 높이와 너비를 구합니다.
	var maskHeight = $(document).height();
	var maskWidth  = window.document.body.clientWidth;
	
	//화면에 출력할 마스크를 설정해줍니다.
	var mask       = "<div id='mask' style='position:absolute; z-index:9000; background-color:#000000; display:none; left:0; top:0;'></div>";
	var loadingImg = '';
	 
	loadingImg += " <img src='"+ gif + "' style='position: absolute; display: block; margin: 0px auto;'/>";

	//화면에 레이어 추가
	$('body')
		.append(mask)

	//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채웁니다.
	$('#mask').css({
			'width' : maskWidth,
			'height': maskHeight,
			'opacity' : '0.3'
	}); 
 
	//마스크 표시
	$('#mask').show();
 
	//로딩중 이미지 표시
	$('#loadingImg').append(loadingImg);
	$('#loadingImg').show();
}

function closeLoadingWithMask() {
	$('#mask, #loadingImg').hide();
	$('#mask, #loadingImg').empty();  
}



 

 예제

   






 

 예제에 쓰인 그림 파일

스피너(Pacman)


팩맨(Pacman)


위지스(Wedges)


해당 이미지들은 아래의 사이트에서 얻을 수 있었습니다.


Loading.io 링크

저작자표시 비영리

'WEB PROGRAMMING > Javascript 응용' 카테고리의 다른 글

[Javascript] onchange 이벤트로 내용 변경 감지  (6) 2019.02.19
[JQuery] remove() 함수를 이용하여 콘텐츠를 삭제하는 방법  (0) 2019.02.06
[JQuery] append() 함수를 이용하여 콘텐츠를 추가하는 방법  (2) 2019.02.06
[Javascript] 요소(Element)의 속성(Attribute) 값 변경하기/설정하기  (0) 2019.02.05

01. onchange 함수

문법 

<element onchange="myScript">


onchange 함수는 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지해줍니다.


예제 소스

<input type="text" value="hello" onchange="bgcolor_yellow(this)" />
<input type="text" value="world" onchange="bgcolor_yellow(this)" />

<script>
function bgcolor_yellow(obj) {
  obj.style.backgroundColor = 'yellow';
}
</script>


결과




02. onchange 함수 응용

예제 소스

<select id="TestSelect" name="SelectValue" onchange="chageLangSelect()">
<option value="" selected disabled>Choose your value</option>              
<option value="val01">YourValue01</option>
<option value="val02">YourValue02</option>
</select>

<script>
function chageSelectedValue(){
    var yourTestSelect = document.getElementById("TestSelect");
     
    // select element에서 선택된 option의 value가 저장됩니다.
    var selectedValue = yourTestSelect.options[yourTestSelect.selectedIndex].value;
 
    // select element에서 선택된 option의 text가 저장된다.
    var selectedText = yourTestSelect.options[yourTestSelect.selectedIndex].text;
}
</script>


9번 라인에서 'TestSelect'라는 아이디를 가진 element를 yourTestSelect에 저장합니다.

그리고 변경할 때 해당 element의 option 번째를 고른다면, 선택한 value와 text로 값이 변경되도록 하는 예제입니다.

여기서 var selectedValue와 selectedText는 크게 역할이 없습니다.


결과




저작자표시 비영리

'WEB PROGRAMMING > Javascript 응용' 카테고리의 다른 글

[Javascript] 자바스크립트로 로딩중 화면 만들기(로딩 표시)  (4) 2019.03.05
[JQuery] remove() 함수를 이용하여 콘텐츠를 삭제하는 방법  (0) 2019.02.06
[JQuery] append() 함수를 이용하여 콘텐츠를 추가하는 방법  (2) 2019.02.06
[Javascript] 요소(Element)의 속성(Attribute) 값 변경하기/설정하기  (0) 2019.02.05

01. remove 함수

문법

.remove( [ selector ] )


remove 함수는 선택한 요소를 제거할 때 사용하거나, 요소 내의 태그들을 삭제할 때 사용합니다.


예제 소스

<html lang="ko">
  <head>
    <title>kkamikoon javascript</title>
    <script>
      $( document ).ready( function() {
        $( 'ul' ).remove( '.rm' );
      } );
    </script>
  </head>
  <body>
    <ul class='rm'>
      <li>Test1</li>
      <li>Test2</li>
    </ul>
  </body>
</html>


결과

<body>
</body>


위와 같이 class 이름이 rm인 ul이 사라진 것을 볼 수 있습니다.




02. remove 함수 응용

이를 특정 id 값을 지정해주어 해당 요소 내부에 있는 값들만을 제거하고 싶을 때가 있을 것입니다.

이때의 예제는 다음과 같습니다.


예제 소스

<script>
	function TestList()
	{
		//$("test_list").remove(); // div 자체를 삭제하기 때문에 사용하지 않음
		$("test_list *").remove(); // div 아래에 있는 태그들만 삭제함
	}
</script>

<div id="test_list">
    <li> It is Test </li>
    <li> It is Test </li>
    <li> It is Test </li>
</div>


위의 예제 소스에서 TestList 함수를 실행시키면 다음과 같은 결과값으로 HTML이 변경됩니다.


결과

<div id="test_list"></div>






저작자표시 비영리

'WEB PROGRAMMING > Javascript 응용' 카테고리의 다른 글

[Javascript] 자바스크립트로 로딩중 화면 만들기(로딩 표시)  (4) 2019.03.05
[Javascript] onchange 이벤트로 내용 변경 감지  (6) 2019.02.19
[JQuery] append() 함수를 이용하여 콘텐츠를 추가하는 방법  (2) 2019.02.06
[Javascript] 요소(Element)의 속성(Attribute) 값 변경하기/설정하기  (0) 2019.02.05

01. append 함수

문법

.append( content [, content ] )


append 함수는 선택한 요소의 내용의 끝에 새로운 콘텐츠를 추가할 수 있습니다.


예제 소스

<html lang="ko">
  <head>
    <title>kkamikoon javascript</title>
    <script>
      $( document ).ready( function() {
        $( 'ul' ).append( '<li>Test3</li>' );
      } );
    </script>
  </head>
  <body>
    <ul>
      <li>Test1</li>
      <li>Test2</li>
    </ul>
  </body>
</html>


결과

  <body>
    <ul>
      <li>Test1</li>
      <li>Test2</li>
      <li>Test3</li>
    </ul>
  </body>


위와 같이 Test3의 태그가 하나 추가되는 것을 볼 수 있습니다.




02. append 함수 응용

이를 특정 id 값을 지정해주어 해당 요소에 값을 추가해줄 수 있습니다.

예제는 다음과 같습니다.


예제 소스

<script>
	function TestList()
	{
		var tmp = "";
		tmp = tmp + "<li> It is Test </li>"
		
		$("test_list").append(tmp);
	}
</script>

<div id="test_list"></div>


위의 예제 소스에서 TestList 함수를 실행시키면 다음과 같은 결과값으로 HTML이 변경됩니다.


결과

<!--한 번 수행됐을 때-->
<div id="test_list"><li> It is Test </li></div>
<!--여러 번 수행됐을 때-->
<div id="test_list"><li> It is Test </li><li> It is Test </li><li> It is Test </li></div>






저작자표시 비영리

'WEB PROGRAMMING > Javascript 응용' 카테고리의 다른 글

[Javascript] 자바스크립트로 로딩중 화면 만들기(로딩 표시)  (4) 2019.03.05
[Javascript] onchange 이벤트로 내용 변경 감지  (6) 2019.02.19
[JQuery] remove() 함수를 이용하여 콘텐츠를 삭제하는 방법  (0) 2019.02.06
[Javascript] 요소(Element)의 속성(Attribute) 값 변경하기/설정하기  (0) 2019.02.05

Javascript를 이용하여 선택한 요소(element)의 속성(attribute) 값을 설정할 수 있습니다.

먼저 문법 먼저 알아보도록 하겠습니다.(절대 다음과 같이 똑같이 코드를 작성한다고 동작하지는 않습니다.)


01. setAttribute 함수

문법

element.setAttribute('attribute_name', 'attribute_value');


element를 선택하여 setAttribute 함수를 실행할 때 우리가 설정하고자 하는 attribute_name(속성 이름)과 attribute_value(속성 값)을 넣어줘야 합니다.


예제 소스코드

document.getElementById('id_value').setAttribute('title', 'It is kkamikoon Title');


위의 예제 소스코드를 살펴보시면 getElementById() 함수를 통해 'id_value'를 가지고 있는 요소를 가져옵니다.

그리고 setAttribute() 함수를 통해 'title' 이라는 이름에 'It is kkamikoon Title'이라는 값을 넣어줍니다.


보다 자세한 예시로 살펴보도록 합시다.



02. setAttribute 함수 응용 예제

만약 id 값이 test인 요소에 href 속성 값을 변경하는 소스코드는 다음과 같습니다.

<html lang="ko">
  <head>
    <title>JavaScript - kkamikoon | .setAttribute()</title>
  </head>
  <body>
    <p><a id="test" target="_blank">kkamikoon main page</a></p>
    <script>
      document.getElementById( 'test' ).setAttribute( 'href', 'https://kkamikoon.tistory.com' );
    </script>
  </body>
</html>

 

결과

kkamikoon main page





저작자표시 비영리

'WEB PROGRAMMING > Javascript 응용' 카테고리의 다른 글

[Javascript] 자바스크립트로 로딩중 화면 만들기(로딩 표시)  (4) 2019.03.05
[Javascript] onchange 이벤트로 내용 변경 감지  (6) 2019.02.19
[JQuery] remove() 함수를 이용하여 콘텐츠를 삭제하는 방법  (0) 2019.02.06
[JQuery] append() 함수를 이용하여 콘텐츠를 추가하는 방법  (2) 2019.02.06

+ Recent posts

티스토리툴바