현재 보이는 위치가 아닌, 다른 위치의 정보를 미리 불러오는 기능은 없습니다. 지도판인 단순히 한판이 아닌 LOD별로 구성되어 있기 때문에, 내부적으로 이 자료구조를 업데이트 하면서 가져오는 것이라. 말씀하신 기능은 현재로써는 구현이 어렵습니다.
백그라운드라고 하면 일단 display:none 으로 된 DOM에서는 동작하지 않고, 그외 DOM의 크기 및 여러가지 기본적인 요소값들을 읽을 수 있는 백그라운드라면 약간의 가능성은 있는데 지도 API차원에서 이둘이 서로 공유되어 그러한 것은 아니고, 브라우저가 지도판 이미지 데이터를 자동으로 캐싱을 하기 때문에, 실제 움직이는 지도에서 좀더 빠른 로딩이 가능할 수 있습니다.
[ 시도1 ]
다음 경로에 대한 이미지를 정적 이미지로 불러오고, 해당 위치의 동적 이미지를 대신해서 캐싱된 정적이미지를 사용한다.
해당 시도는 정적미지이와, 동적 이미지가 요청되는 경로도 다르고, 형태도 달랐기 때문에 실패
[ 시도2 ]
다음 경로에 대한 위치를 보여주는 지도를 원래있던 지도 뒤에 배치해 안보이게 하고, 미리 다음 이미지를 가져옴
해당 시도는, 첫 로드시 조금 더 오랜 시간이 소요되지만 다음 경로 이동시에 간헐적인 버벅임이나, 끊김현상은 조금 줄어든 것으로 보입니다.
[ 시도2 개선 ]
위 시도2에서 연속적으로 다음 경로를 불러오게되면, 오히려 이전보다 더 많은 png를 요청하기 때문에 이전보다 더 버벅이는 문제가 생겼습니다. 이를 해결하기 위해 debounce를 사용해서 요청시간을 지연시켜, 연속적으로 변경되는 값은 건너뛰고, 원하는 위치의 인덱스만 불러올 수 있도록 만들어서 최적화를 진행했습니다.