인프런 커뮤니티 질문&답변
작성한 질문수
페이지 load될때 캔버스 화면에 사진이 안뜨는 현상
작성
·
631
1
// 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
2
1분코딩
지식공유자
말씀대로 이미지를 생성하고 로드를 시도하는 시점에 차이가 있어서 그런건데요,
두가지 경우 각각 일어나는 일들의 순서를 간단히 정리해보면 아래와 같습니다^^
#1
1. setCanvas 호출로 이미지 생성, 로드 시도
2. setCanvas에서 생성한 이미지들이 모두 로드 완료되고 나면 load 이벤트 발생 -> load 이벤트핸들러 실행
3. 이미지 로드가 모두 완료된 상태에서 drawImage를 실행하는 것이므로 캔버스에 이미지가 제대로 그려짐
#2
1. 따로 먼저 실행하는 함수 없이 그냥 페이지 로드 -> html안에 <img> 태그로 넣은 이미지들만 로드 시도
2. html에 작성되어있는 요소들의 로드가 완료되고 나면 load 이벤트 발생 -> load 이벤트핸들러 실행
3. load 이벤트핸들러가 실행되면 그제서야 setCanvas 호출로 이미지들을 생성하고 로드 시도
4. setCanvas 실행 하자마자 기다림 없이 drawImage를 실행하므로, 이 시점에는 setCanvas에서 만든 이미지들의 로드가 완료되지 않았으므로 정상적으로 그려지지 않음