Image 사이즈 가져오기_JS 파싱과 실행 동작 순서

오류

const img = new Image();
img.src = images[0]; //image src를 담은 배열
console.log(img.width);

 

이미지의 사이즈를 참조해야 되서 다음과 같이 Image 객체를 통해 인스턴스를 생성하고 해당 인스턴스에 경로를 지정해 준 뒤, 이미지의

가로 사이즈를 참조하려고 했지만 원래 이미지 사이즈가 아닌 0 값이 계속 나오는 변수가 발생하였다.

 

검색해서 확인해 보니 모든 리소스와 같이 이미지를 로드하는 것은 비동기 작업으로 이루어진다는 사실을 확인하였다.

즉, 이미지의 너비를 요청할 때, img.width의 값은 아직 값을 불러오지 않은 상태이기 때문에(비동기 작업은 다른 작업이 동기적으로 모두 실행이 마친 뒤에 실행) 값이 0이 되는 문제가 발생했던 것이다.

const img = new Image();
img.src = images[0];
img.onload = e => console.log(img.width);

위의 사실을 확인하기 위해 load 이벤트를 이미지 인스턴스에 등록해주고 그 콜백 함수 내에서 이미지의 가로 너비를 출력해 봤더니

이미지의 제대로 된 너비 값이 나왔다.

클로저로 인해 상위 함수 내에서 선언된 img 변수는 콜백 함수 내에서 참조가 가능하지만 해당 콜백 함수 내에서 상위 변수에 이미지의 너비 값을 할당한다고 하더라도 상위 함수 내에서는 그 변수 내에 값을 사용하지 못한다.

(해당 값이 들어간 시점은 해당 변수가 있는 상위 함수가 종료된 시점이기 때문이다)

load event: css 및 image 등과 같은 리소스 파일들이 모두 완료된 뒤에 호출 및 실행 가능하다.

 

DomContentLoaded와 onLoad 이벤트 핸들러

Promise나 async/await를 통해 비동기 후속 처리를 해주는 방식말고도 DomcontentLoaded와 onLoad 이벤트 핸들러를 이용하여 위의 문제를 해결할 수 있다는 것을 알 수 있었다.

 

우선 다음과 같이 img 태그가 포함되어 있는 마크업을 innerHTML 상에서 동적으로 생성해 준다.이때 DOMContentLoaded 이벤트 핸들러 콜백 함수 내에서 위와 같은 연산을 수행준다면 우선적으로 경로를 정해 준 img태그를 생성할 수 있다.

DOMContentLoaded: HTML 파싱만 완료되면 콜백 함수를 호출 및 실행 가능하다.

document.addEventListener('DOMContentLoaded', () => {
    $container.innerHTML = `
      <div class="carousel-slides">
        ${[images[images.length - 1], ...images, images[0]].map(url => `<img src="${url}" />`).join('')}
      </div>
      <button class="carousel-control prev">&laquo;</button>
      <button class="carousel-control next">&raquo;</button>
    `;

    $carouselSlides = document.querySelector('.carousel-slides');
  });

 

로컬 스토리지에서 해당 실제 이미지를 불러오는 것을 load 이벤트 콜백 함수 내에서 연산을 실행해 준다. 경로가 정해진 img 태그는 DomContentLoaded 콜백 함수 내에서 동적으로 이미 생성해 둔 상태이기 때문에 태그 선택자를 통해서가져올 수 있다.

window.onload = () => {
    const { offsetWidth } = $carouselSlides.querySelector('img');
    $container.style.width = `${offsetWidth}px`;
    $container.style.opacity = 1;

    move(++currentSlide);
  };

https://choi95.tistory.com/3?category=857834 

자바스크립트 파싱과 실행