Lpla 개발 블로그

JavaScript/실전

[JavaScript] 익스플로러 유튜브 로딩 문제 해결

익스플로러에서 iframe이나 object로 유튜브를 삽입하면 타 브라우저에 비해서 로딩 속도가 매우 느린 현상이 있다. 이미 이 자체만으로도 심각한 문제지만, 사이트에 페이드 등 일부 효과들이 렉을 동반한 버벅임으로 정상 실행되지 않는 것도 문제다. 크롬은 지연 로딩을 지원하고 있다. 이치럼 loading="lazy" 를 추가해주면 페이지를 로드할 때 유튜브를 읽지 않고 스크롤이 됐을 때 유튜브를 로드하여 페이지 로딩 시간을 단축시키고 렉도 줄인다. 하지만 아쉽게도 익스플로러는 지연로딩 기능이 없다. 지연로딩도 없지만 로딩 속도가 비정상적으로 느리다. 이 문제를 해결하기 위해서 익스플로러에서 페이지 로드시 유튜브를 읽지 않고 썸네일만 불러들인 다음, 썸네일을 클릭하면 유튜브 영상이 시작되도록 하는 방식..