[CI4] 동영상이 있는 페이지 성능 최적화.

사이트 내 동영상이 여러개 있는 상황.

그와중에 모달이 떠야하는데, 모달 내 이미지가 굉장히 늦게 로드되는 문제였다. 띡띡띡 끊김....

원인은 모든 페이지가 로드된 후 modal이 켜짐 되니, 그때부터 이미지를 다운 받는데

video가 다운 받는 중에 이미지 다운로드도 진행되는 것.

 

원인은 video 태그 내 autoplay가 문제였다.

태그가 생성되고 바로 재생되다보니, 시스템 자원이 그곳으로 몰려버리게 되는 것.

 

그래서 autoplay 속성을 제거하고, js에서 해당 파일을 재생하게 만들어버렸다.

모달 출력을 먼저하게 하고, 동영상을 재생하는 부분을 구현하게 하였다.

그랬더니 모달이미지가 늦게 뜨지 않고, 모달이미지가 먼저 출력된 후 동영상 다운로드가 실시되었다.

 

 document.getElementById('VIDEO').play(); // 이건 되는데
 $('#VIDEO').play(); // 이건 안먹는다.

참고 JS

https://homzzang.com/b/js-1960

홈짱닷컴