안녕하세요. 따시 입니다.
웹페이지를 제작 할때에 로딩바 출력을 만들려고 합니다.
프로젝트 할때에 화면 조회시 페이지를 만들때에 대부분 두가지로 나누어 지는데요
Ajax로 호출하여 화면에 뿌려줄때에 와 Submit 시켜서 화면을 조회 할 수 가 있습니다.
이:때에 Ajax 할때에는 로딩바 만들기는 수월하나
Submit으로 조회 화면을 만들때에는 로딩바를 어떻게 해야할지 고민을 하였습니다.
이미 다 만들어 놓았는데, 클라이언트가 로딩바를 넣어달라는 요청에 고민이 되었죠.
제가 사용할 로딩바 이미지는 아래와 같습니다.
● Submit으로 로딩바 호출방법
<body> <div id="div_load_image" style="position:absolute; top:50%; left:50%;width:0px;height:0px; z-index:9999; background:#f0f0f0; filter:alpha(opacity=50); opacity:alpha*0.5; margin:auto; padding:0; text-align:center"> <img src="/images/common/loading.gif" style="width:100px; height:100px;"> </div> . . . </body>Body 상단에 div 영역을 넣어줍니다. 이미지 경로는 프로젝트 경로에 맞게 수정해야겠죠
이렇게 할 경우에 화면에 접속하면 로딩바가 계속 돌고 있습니다.
이제 <script> 에서 windows.onload 쪽에 $("#div_load_image").hide(); 을 넣어줍니다.
이렇게 하면 html이 다 브라우저에 뿌려진 후에 해당 div를 hide 시켜버립니다.
그러면 화면 조회후 로딩바는 사라지게 되지요
<script> function search(){ $("#div_load_image").show(); $("#searchForm").attr("method", "POST"); $("#searchForm").attr("action", "/test"); $("#searchForm").submit() } <script>
마지막으로 조회 하면 function을 호출하는 곳에 $("#div_load_image").show(); 을 넣어주면 됩니다.
● Ajax 로 로딩바 호출방법
<script> function callAjax(test, test2){ var sendData; sendData = JSON.stringify({ "test" : test, "test2": test2 }); $("#div_load_image").show(); $.ajax({ type : 'POST', url : "/test", contentType: "application/json;charset=UTF-8", data : sendData, dataType : 'json', success : function(data){ // 조회성공 $("#div_load_image").hidden(); }, error: function(jqXHR, textStatus, errorThrown){ alert("오류가 발생하였습니다."); $("#div_load_image").hidden(); } }); } </script>호출전에 show() 함수로 노출 후 success 또는 error 일때에 hidden() 처리하면 됩니다.
공유하기
게시글 관리
구독하기따시! 먹고 살겠다고..저작자표시 비영리 변경금지
'개발경험 및 메모 > Javascript & JQuery' 카테고리의 다른 글
div ul li 높이 똑같이 적용하기. (0)2022.09.14Javascript history.back 체크 이슈 (0)2022.07.13[Javascript] 배열 관련 메서드 - push(), pop(), join() (0)2020.06.26[자바스크립트 성능 최적화] Ch01. 로딩과 실행
Study/BookNotes 2021. 3. 4. 15:47
브라우저 대부분은 한 프로세스에서 UI 업데이트와 JavaScript 실행을 동시에 수행할 수 없다
JS코드가 <script> 안에 있든, 외부 파일에 있든 해당 처리가 끝날 때까지 렌더링 등 다른 작업은 중단됨
HTML5, 최신 브라우저에서도 그러한가?
- 동시 다운로드 자체는 지원하지만 pure한 <script>에서는 작업이 중단됨
- defer (지연 스크립트) 또는 async (비동기 스크립트) 옵션이 있는 경우, 병렬 다운로드 가능함
참고 :
- defer, async 스크립트
- 스크립트 요소
스크립트의 위치
<head>에서 여러 개의 JS을 로딩하는 경우
- 첫번째 JS 파일 가져오기 위한 HTTP request
- 첫번째 JS 파일 다운로드
- 첫번째 JS 파일 실행
- 두번째 JS 파일 가져오기 위한 HTTP request
이런 순서로 진행되며, 각 과정을 진행하면서 이미지 다운로드, 렌더링 등 다른 작업은 중단됨
따라서 모든 <script>는 <body> 마지막에 배치해서 페이지 전체를 내려받는 것에 영향 주지 않도록 하는 것을 권장
인라인 스크립트가 <link> 다음에 위치할 경우
스타일시트를 완전히 다운로드할 때까지 인라인 스크립트 실행 차단됨
따라서 인라인 스크립트는 <link> 다음에 놓지 않는 것을 권장
스크립트 묶기
외부 JS를 가져오려면 HTTP 요청해야 하고, 이 때마다 성능 부담 증가
따라서 25kb 4개 가져올 때보다 100kb 1개 가져올떄가 더 빠름
비차단 스크립트 nonblocking script
그런데 대형 웹에서는 이렇게 하나로 스크립트를 묶더라도 bundling된 JS파일이 커지는 문제가 있음
브라우저 프로세스를 차단하지 않으면서 JS를 점진적으로 불러오는 방법이 필요
페이지를 완전히 불러온 다음 JS 소스를 불러와야 함
- window.onload 이벤트 발생 이후 코드 로딩
지연 스크립트; defer
- 책 발간 당시에는 IE/Firefox만 지원한 기능이지만, 현재는 모든 브라우저에서 지원
- Syntax: <script defer type="text/javascript" src="..."></script>
- <script> 만나는 순간부터 소스 로딩되고, DOM 완전히 로드된 이후에 실행
- onload 이벤트 핸들러 호출 전 실행
- 브라우저의 다른 프로세스를 차단하지 않음
- 인라인 스크립트, 외부 스크립트 파일 모두 동일하게 작동
동적 <script> 태그
- 동적으로 생성한 script를 페이지에 추가하는 순간부터 파일 로딩하고 바로 실행
- 따라서 독립실행 코드라면 문제 없지만, 인터페이스만 있는 코드라면 문제 가능성
- script.onload (IE의 경우 script.readyState에 따라 분기)
XMLHttpRequest 스크립트 삽입
HTML5에서 XMLHttpRequest 보다 성능이 좋고 사용하기 편한 fetch가 추가됨!
책에서는 XMLHttpRequest로 설명하지만 실습은 fetch로 진행함
- CORS 이슈 때문에 대형 웹에서는 사용하지 않음
- JS 코드를 내려받지만 즉시 실행하지는 않음
예시
<html> <head> <meta charset="UTF-8" /> <script defer type="text/javascript" src="defer.js"></script> </head> <body> <h1>Hello there!</h1> <script> function loadScript(url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; // IE if (script.readyState) { script.onreadystatechange = () => { if ( script.readyState === "loaded" || script.readyState === "complete" ) { script.onreadystatechange = null; callback(); } }; } // other browsers else { script.onload = function() { callback(); }; } script.src = url; document.head.appendChild(script); } loadScript("dynamic.js", function() {console.log("dynamic script loaded!!")}) </script> <script> var url = "fetch.js"; var type = "text/javascript"; var headers = new Headers(); headers.append("Content-Type", type); var initOptions = { method: "GET", headers }; fetch(url, headers) .then(function(res) { console.log("fetched data loaded!!"); return res; }) .then(function(data) { var script = document.createElement("script"); script.type = type; script.src = url; document.head.appendChild(script); }); </script> <script> console.log("pure script!"); </script> <script> window.onload = () => { console.log("onload!"); }; </script> </body> </html>
추천하는 비차단 패턴
JS 파일 크기가 큰 경우
- 최소한의 크기로 동적 로딩 코드 작성 또는 lazy loading 관련 라이브러리 사용
- 나머지 JS 파일 불러오는 코드 로딩
공유하기
게시글 관리
구독하기wiiii저작자표시 비영리 동일조건
- 카카오스토리
- 트위터
- 페이스북
'Study > BookNotes' 카테고리의 다른 글
[자바스크립트 성능 최적화] Ch04. 알고리즘과 흐름 제어 (0)2021.03.04[자바스크립트 성능 최적화] 내용 정리 시작! (0)2021.03.03TAG
javascript, performance, 성능 최적화
관련글 관련글 더보기
- [자바스크립트 성능 최적화] Ch04. 알고리즘과 흐름 제어
- [자바스크립트 성능 최적화] 내용 정리 시작!
댓글 0
댓글 접기 댓글 펼치기이전 댓글 더보기
비밀글
등록
라이브리 댓글 작성을 위해 JavaScript를 활성화 해주세요