페이지 load될때 캔버스 화면에 사진이 안뜨는 현상

Question

// 20200626 이미지를 담고 있는 배열 생성 const setCanvas = () => { let image ; for ( let i = 0 ; i < infoArr [ 0 ]. values . videoImageCount ; i ++) { image = new Image (); image . src = `../video/001/IMG_ ${ 6726 + i } .JPG` ; infoArr [ 0 ]. objs . videoImages . push ( image ); } } #1. setCanvas (); window . addEventListener ( 'load' ,() => { console . log ( infoArr [ 0 ]. objs . videoImages ); console . log ( infoArr [ 0 ]. objs . videoImages [ 0 ]) setLayout (); infoArr [ 0 ]. objs . context . drawImage ( infoArr [ 0 ]. objs . videoImages [ 0 ], 0 , 0 ); }) #1에서는 페이지 로드 완료시 스크롤 없이도 첫번째 사진이 잘 렌더링 vs #2 window . addEventListener ( 'load' ,() => { setCanvas (); console . log ( infoArr [ 0 ]. objs . videoImages ); console . log ( infoArr [ 0 ]. objs . videoImages [ 0 ])//사진 setLayout (); infoArr [ 0 ]. objs . context . drawImage ( infoArr [ 0 ]. objs . videoImages [ 0 ], 0 , 0 ); }) #2에서는 페이지 로드 완료시 스크롤 없으면 첫번째 사진의 렌더링이 일어나지 않습니다.콘솔에 찍어보니 #1괴 #2모두 캔버스에 들어갈 사진들이 잘 나오구요. 이미지를 넣고 나서 로드 vs 로드한 후에 이미지를 넣는 것의 차이라 그런걸까요?도무지 모르겠어서 여쭤봅니다~

1분코딩 · Answer

말씀대로 이미지를 생성하고 로드를 시도하는 시점에 차이가 있어서 그런건데요, 두가지 경우 각각 일어나는 일들의 순서를 간단히 정리해보면 아래와 같습니다^^ #1 1. setCanvas 호출로 이미지 생성, 로드 시도 2. setCanvas에서 생성한 이미지들이 모두 로드 완료되고 나면 load 이벤트 발생 -> load 이벤트핸들러 실행 3. 이미지 로드가 모두 완료된 상태에서 drawImage를 실행하는 것이므로 캔버스에 이미지가 제대로 그려짐 #2 1. 따로 먼저 실행하는 함수 없이 그냥 페이지 로드 -> html안에 <img> 태그로 넣은 이미지들만 로드 시도 2. html에 작성되어있는 요소들의 로드가 완료되고 나면 load 이벤트 발생 -> load 이벤트핸들러 실행 3. load 이벤트핸들러가 실행되면 그제서야 setCanvas 호출로 이미지들을 생성하고 로드 시도 4. setCanvas 실행 하자마자 기다림 없이 drawImage를 실행하므로, 이 시점에는 setCanvas에서 만든 이미지들의 로드가 완료되지 않았으므로 정상적으로 그려지지 않음