[jQuery] 이미지 로딩 완료 되었는지 확인하는 방법
브라우저에서 이미지가 완전하게 로딩이 완료 되었는지 jQuery을 사용해서 확인하는 방법에 대한 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 이미지 로딩 완료 확인</title>
</head>
<body>
<script>
$(document).ready(function()
{
let divBoxTotal = 5;
let num = 1;
let okNum = 0;
for ( num; num <= divBoxTotal; num++ ) {
if ( $( "#div_"+num )[0].complete ) okNum++;
}
if ( okNum == divBoxTotal ) console.log( '모두 읽혀짐' );
else {
console.log( '이미지 로딩된 갯수:', okNum);
}
});
</script>
</body>
</html>
모두 읽혀 졌는지 아닌지에 대한 판단 입니다.
이런 방법을 사용하는 것은 특정목적에서 완료가 되었는지 안되었는지 setTimeOut을 통해서 체크를 하게 됩니다. 비동기 방식이기 때문에 특정 조건을 만족 할 때 까지 여러번 체크를 해야 되는 경우가 발생 할 수 있습니다. 자바스크립트의 특성상 이벤트리스너 또는 setTimeOut등 바로(절차적 순서대로) 실행되지 않는다는 것을 이해하고 작성할 필요성이 있습니다.
