개발을 하다 보면 한번 불러온 이미지를 재 로딩하는데 큰 시간이 안걸린다는 것을 확인할수 있다. 다시 말하면 한번 불러온 이미지들은 Web에서 캐쉬를 쌓고 다시 불러올때 캐쉬에서 이미지를 확인한다.
가정 :
한 화면에 2x2 의 이미지들이 있는데 next button을 누룰시 새로운 4장의 이미지들이 바뀐다.
이미지 캐쉬를 적용하지 않은 상태
next button -> 다음 이미지 가져오기 -> 이미지 4장 로딩
이미지 캐쉬를 적용한다면
최초 4장 이미지를 불러올때 그다음4장이미지 tag들을 미리 만들어준다.
ionic에서 사용하는 방법은 아래와 같다
Now, imagine if we had an image tag with an ng-src always pointed at the image url for
Recommendations.queue[1] (aka the next song in the queue). We can make this image nearly invisible with CSS: 1px tall and 1px wide, with an opacity of 0.01 - yet the browser will still download it and place it in cache. Perfect!