반응형 ajax 프로그래스바2 [javascript] 동기 Ajax 로딩바_ ajax synchronous progressbar [javascript] 동기 Ajax 프로그래스바_ loading bar for sync ajax [javascript] 동기 Ajax loading bar_ progress bar for sync ajax Ajax에서 async 즉, 동기/비동기를 적용하는 옵션이 있다. async를 true로 주면 비동기, false를 주면 동기로 작동한다. ajax에서 async를 false로 적용하게되면, ajax가 완벽하게 실행하는동안 자바스크립트 동작이 안되기 때문에 적용해두었던 로딩바 또는 프로그레스바가 작동하지 않게된다. ■ 해결방법 $('#loading').show(); let param = {'test': 'value'}; setTimeout(function() { $.ajax({ url : 'URL',.. 2022. 7. 18. Ajax 로딩바 구현하기_ 스프링, 장고,자바스크립트,ajax 로딩바, 프로그래스바 비동기 통신을 하다보면 보편적으로 ajax를 제일 많이 사용할거라 생각됩니다. 물론 axios통한 비동기 처리도 많겠구용. 이 글은 ajax 통신을 하면서 소요시간에 따른 로딩바를 적용하는 방법입니다. 복붙할 수 있는 소스는 하단에 있습니다. 해당 파일은 HTML 기반이으로, jsp인 경우에는 jstl 라이브러리나 태그를 잘 설정해주세요~ ■ 로딩바 파일 프로젝트 안에 삽입하기 무료로 제공되는 로딩.gif 입니다. 로딩바 샘플파일이 따로 없으면 위의 파일을 다운받아 리소스 파일에 넣어주세요. ■ 테스트 페이지 만들기 [ 소스코드는 하단에 첨부되어있습니다. ] 로딩바 테스트를 할 수 있는 테스트 페이지 작성하기. 로딩div 안에 img 태그에는 로딩바.gif 경로를 넣어주면 됩니다. ■ 로딩바 div에 c.. 2021. 12. 29. 이전 1 다음 반응형
