자바스크립트 디버깅 + 이미지 파일로드 비동기처리

콘솔을 이용해 디버깅하는 방법은 너무 귀찮고 한계가 있다..

 

마침 오늘회사에서 해결할 문제가 회사 포트폴리오 팝업에 이미지 파일이 받아지기 전까지

(사진이미지가 많고 조금커서 팝업이 먼저떠도 조금 기다려야하는 상황...)

스피너가 보여지는 작업을 해야했는데...

 

단순히 html 파일을 가져오는게 아닌 그안에 이미지파일이 로드 되었는지를 구분 해야했다.

어떻게 이미지파일의 status를 가져올지..에 대해 막혔다..

 

아래처럼 dim_loading(스피너)를 보여주고

> 팝업호출

> 이미지 파일 호출

> 스피너 display:none; 처리

async function comPopup($src){
debugger; // script 안에 break 포인트를 직접 지정해주는 경우
		$('#dim_loading').css('display','block')
		if($src.charAt(0) == '#'){
			//내부팝업 호출
			$($src).modal({
				showClose: false,
				closeExisting: false,
			});
		}
		else{
			//외부팝업 ajax 호출
			await $.get($src, function(html) {
				var tempDom = $(html).filter('.o-wrap-popup');
				tempDom.data('src', $src);
				tempDom.appendTo('body').modal({
					showClose: false,
					closeExisting: false,
				});
			});
			myRequest = new Request(nowUrl + $('.swiper-wrapper div img').last().attr('src'));
				fetch(myRequest).then(function(response) {
					if(response.status != 200){
						alert('이미지 불러오기 실패');
					}
					response.blob().then(function(myBlob) {
		    		var objectURL = URL.createObjectURL(myBlob);
		  		});
			}).then(() => {
				$('#dim_loading').css('display','none')
			})		
		}

 

혹은 개발자도구 > source에서 브레이크 포인트를 찍어줄 수 있다.