css background 이미지 preload

CSS background-img 를 이용해서  이미지버튼을 사용하고 있는데, hover 시 동작을 다른 이미지를 보여주려고 한다. 그런데 mouse hover 시 이미지가 미리 준비되어 있지 않아 가지고 오는 동안 보여줄 이미지가 없는 문제가 발생할 수 있다. 이 때, mouse hover 시 필요한 이미지를 미리 가져오면 되는데 이 때 아래의 방법을 이용할 수 있다. 

ie 11 도 되는 것 같다.

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
    content:url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg); // load images
}

https://stackoverflow.com/a/14390213/6652082

Preloading CSS Images